/* The same Ionicons glyphs bundled by @expo/vector-icons in the mobile app. */
@font-face {
  font-family: 'Baithout Ionicons';
  src: url('./fonts/Ionicons.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
.app-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  font-size: var(--icon-size, 20px);
  line-height: 1;
  vertical-align: middle;
  pointer-events: none;
}
.app-icon::before {
  font-family: 'Baithout Ionicons';
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.app-icon[data-icon="add"]::before { content: "\f103"; }
.app-icon[data-icon="arrow-forward"]::before { content: "\f133"; }
.app-icon[data-icon="arrow-up"]::before { content: "\f145"; }
.app-icon[data-icon="chatbubble-ellipses"]::before { content: "\f212"; }
.app-icon[data-icon="chatbubble-ellipses-outline"]::before { content: "\f213"; }
.app-icon[data-icon="chatbubble-outline"]::before { content: "\f215"; }
.app-icon[data-icon="chatbubbles-outline"]::before { content: "\f218"; }
.app-icon[data-icon="checkbox"]::before { content: "\f21a"; }
.app-icon[data-icon="checkbox-outline"]::before { content: "\f21b"; }
.app-icon[data-icon="checkmark-circle"]::before { content: "\f21e"; }
.app-icon[data-icon="chevron-back"]::before { content: "\f229"; }
.app-icon[data-icon="chevron-down"]::before { content: "\f232"; }
.app-icon[data-icon="close"]::before { content: "\f24a"; }
.app-icon[data-icon="close-circle"]::before { content: "\f24b"; }
.app-icon[data-icon="cloud-offline-outline"]::before { content: "\f25b"; }
.app-icon[data-icon="compass"]::before { content: "\f283"; }
.app-icon[data-icon="compass-outline"]::before { content: "\f284"; }
.app-icon[data-icon="create-outline"]::before { content: "\f293"; }
.app-icon[data-icon="document-text-outline"]::before { content: "\f2b4"; }
.app-icon[data-icon="ellipsis-horizontal"]::before { content: "\f2ce"; }
.app-icon[data-icon="hand-left"]::before { content: "\f35b"; }
.app-icon[data-icon="hand-left-outline"]::before { content: "\f35c"; }
.app-icon[data-icon="happy-outline"]::before { content: "\f362"; }
.app-icon[data-icon="id-card"]::before { content: "\f38b"; }
.app-icon[data-icon="id-card-outline"]::before { content: "\f38c"; }
.app-icon[data-icon="image-outline"]::before { content: "\f38f"; }
.app-icon[data-icon="journal"]::before { content: "\f3a0"; }
.app-icon[data-icon="journal-outline"]::before { content: "\f3a1"; }
.app-icon[data-icon="location-outline"]::before { content: "\f3c5"; }
.app-icon[data-icon="log-out-outline"]::before { content: "\f3d1"; }
.app-icon[data-icon="moon-outline"]::before { content: "\f461"; }
.app-icon[data-icon="navigate-outline"]::before { content: "\f470"; }
.app-icon[data-icon="notifications-off-outline"]::before { content: "\f47d"; }
.app-icon[data-icon="notifications-outline"]::before { content: "\f47f"; }
.app-icon[data-icon="paper-plane-outline"]::before { content: "\f48e"; }
.app-icon[data-icon="phone-portrait-outline"]::before { content: "\f4b5"; }
.app-icon[data-icon="pin"]::before { content: "\f4ba"; }
.app-icon[data-icon="play"]::before { content: "\f4c6"; }
.app-icon[data-icon="refresh-outline"]::before { content: "\f518"; }
.app-icon[data-icon="search-outline"]::before { content: "\f563"; }
.app-icon[data-icon="share-social-outline"]::before { content: "\f575"; }
.app-icon[data-icon="sunny-outline"]::before { content: "\f5ae"; }
.app-icon[data-icon="swap-horizontal-outline"]::before { content: "\f5b1"; }
.app-icon[data-icon="videocam-outline"]::before { content: "\f611"; }

/* Selected tabs and cheers use the filled mobile variants. */
.active > .app-icon[data-icon="compass-outline"]::before { content: "\f283"; }
.active > .app-icon[data-icon="checkbox-outline"]::before { content: "\f21a"; }
.active > .app-icon[data-icon="journal-outline"]::before { content: "\f3a0"; }
.active > .app-icon[data-icon="chatbubble-ellipses-outline"]::before { content: "\f212"; }
.active > .app-icon[data-icon="id-card-outline"]::before { content: "\f38b"; }
[aria-pressed="true"] > .app-icon[data-icon="hand-left-outline"]::before { content: "\f35b"; }

/* Keep icon sizing independent of the website's monospace type sizes. */
.nav-link > .app-icon { width: 24px; flex-basis: 24px; font-size: 22px; line-height: 1; color: inherit; }
.nav-link.active > .app-icon { color: var(--purple); }
.mobile-nav > button > .app-icon { --icon-size: 23px; }
.adventure-topbar button > .app-icon, .profile-icon-button > .app-icon { --icon-size: 23px; }
.new-post, .logout-button, .theme-toggle { display: flex; align-items: center; gap: 10px; }
.new-post > .app-icon { --icon-size: 24px; }
.me-mini > .app-icon { margin-left: auto; }
.post-actions .app-icon, .post-detail-actions .app-icon { --icon-size: 22px; margin-right: 3px; }
.post-meta .app-icon, .quest-post-tag .app-icon, .person-line small .app-icon,
.event-host-link .app-icon, .chat-preference-badges .app-icon { --icon-size: 16px; }
.chat-empty > .app-icon, .chat-list-empty > .app-icon,
.search-empty > .app-icon, .post-detail-media-fallback > .app-icon,
.reel-fallback > .app-icon { --icon-size: 40px; }
.profile-grid-fallback > .app-icon { --icon-size: 26px; }
.profile-grid-play .app-icon, .profile-avatar-hint .app-icon { --icon-size: 14px; }
.login-wordmark > .app-icon { font-size: 64px; }
.studio-art .app-icon { --icon-size: 42px; }
.studio-preview-social .app-icon { --icon-size: 23px; }
.studio-close .app-icon, .modal-close .app-icon { --icon-size: 24px; }
.studio-text-preview > .app-icon { --icon-size: 32px; }
.studio-types .app-icon, .studio-file-card .app-icon { --icon-size: 22px; }
.theme-options button .app-icon { margin-right: 4px; }

.app-icon[data-icon="checkmark-circle-outline"]::before { content: "\f21f"; }
.app-icon[data-icon="camera-outline"]::before { content: "\f1dc"; }
.app-icon[data-icon="add-outline"]::before { content: "\f107"; }