:root {
  color-scheme: light dark;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
  font-family: inherit;
}

button:disabled {
  opacity: 0.5;
  cursor: default;
}

html,
body,
#app-root {
  height: 100%;
}

@media (min-width: 800px) {
  :focus-visible {
    outline: 2px solid var(--primary-button-color);
    outline-offset: 2px;
  }
}

@media (hover: none) and (pointer: coarse) {
  :focus,
  :focus-visible {
    outline: none;
  }
}

html {
  /* colors */
  --white: #ffffff;
  --black: #000000;
  --less-white: #fcfcfc;
  --off-white: rgb(241, 243, 245);
  --dark-gray: #1a1a1a;
  --mid-gray: #262626;
  --gray: #292929;
  --light-gray: #404040;
  --mid-light-gray: #656565;
  --lighter-gray: #d0d0d0;
  --lightest-gray: #f3f3f3;
  --blue: #418af7;
  --purple: #9054f9;
  --pink: #df4074;
  --red: #d81316;
  --red-muted: #ff4949;
  --yellow: #e6a817;
  --muted-gray-light: #666;
  --muted-gray-dark: #999;
  --disabled-gray: #464646;

  /* theme colors */
  --background-color: light-dark(var(--less-white), var(--dark-gray));
  --background-color-secondary: light-dark(
    var(--lightest-gray),
    var(--mid-gray)
  );
  --text-color: light-dark(var(--dark-gray), var(--off-white));
  --text-color-muted: light-dark(
    var(--muted-gray-light),
    var(--muted-gray-dark)
  );
  --text-color-secondary: light-dark(var(--gray), var(--lighter-gray));
  --generic-border-color: light-dark(var(--lighter-gray), var(--light-gray));
  --text-input-background-color: light-dark(var(--off-white), var(--gray));
  --post-hover-color: light-dark(var(--lightest-gray), var(--mid-gray));
  --callout-color: light-dark(var(--lightest-gray), var(--mid-gray));
  --skeleton-color: light-dark(var(--lighter-gray), var(--gray));
  --context-menu-background-color: light-dark(var(--white), var(--mid-gray));
  --context-menu-item-hover-color: light-dark(
    var(--off-white),
    var(--light-gray)
  );
  --post-action-icon-color: light-dark(
    var(--mid-light-gray),
    var(--text-color-muted)
  );

  --highlight-color: var(--blue);
  --highlight-color-tint: color-mix(
    in srgb,
    var(--highlight-color) 8%,
    var(--background-color)
  );
  --highlight-color-tint-hover: var(--post-hover-color);

  --text-link-color: var(--highlight-color);
  --like-color: var(--pink);
  --error-color: var(--red-muted);
  --error-subtle-color: color-mix(in srgb, var(--error-color) 12%, transparent);
  --error-subtle-hover-color: color-mix(
    in srgb,
    var(--error-color) 20%,
    transparent
  );
  --warning-color: var(--yellow);

  /* border colors */
  --header-border-color: var(--generic-border-color);
  --embed-border-color: var(--generic-border-color);
  --post-border-color: var(--generic-border-color);
  --avatar-border-color: var(--generic-border-color);
  --reply-context-line-color: light-dark(var(--lighter-gray), var(--mid-gray));
  --reply-context-line-width: 2px;

  /* button colors */
  --primary-button-color: var(--highlight-color);
  --primary-button-hover-color: color-mix(
    in srgb,
    var(--highlight-color) 80%,
    transparent
  );
  --primary-button-text-color: var(--white);
  --secondary-button-color: light-dark(var(--lightest-gray), var(--gray));
  --secondary-button-hover-color: light-dark(
    var(--lighter-gray),
    var(--light-gray)
  );
  --back-button-hover-color: var(--post-hover-color);
  --icon-button-color: var(--text-color-muted);
  --tab-bar-button-active-color: var(--highlight-color);

  /* avatar sizes */
  --avatar-size-quoted-post: 16px;
  --avatar-size-footer-nav: 24px;
  --avatar-size-followed-by: 24px;
  --avatar-size-reply-prompt: 28px;
  --avatar-size-message: 32px;
  --avatar-size-message-input: 36px;
  --avatar-size-post: 40px;
  --avatar-size-sidebar-compact: 48px;
  --avatar-size-convo: 50px;
  --avatar-size-sidebar: 52px;
  --avatar-size-chat-info-panel: 88px;
  --avatar-size-profile: 100px;

  /* border radius */
  --skeleton-border-radius: 4px;
  --tag-border-radius: 4px;
  --list-avatar-border-radius: 20%;
  --feed-avatar-border-radius: 20%;
  --icon-button-border-radius: 4px;
  --feed-feedback-inner-border-radius: 6px;
  --text-input-border-radius: 8px;
  --moderation-warning-border-radius: 8px;
  --blocked-post-radius: 8px;
  --context-menu-button-radius: 8px;
  --sidebar-nav-item-border-radius: 8px;
  --context-menu-item-group-border-radius: 8px;
  --report-selected-item-border-radius: 8px;
  --toast-border-radius: 8px;
  --image-preview-border-radius: 8px;
  --typeahead-border-radius: 8px;
  --card-border-radius: 8px;
  --image-border-radius: 10px;
  --video-border-radius: 10px;
  --embed-border-radius: 10px;
  --context-menu-border-radius: 10px;
  --dialog-border-radius: 12px;
  --callout-border-radius: 12px;
  --message-bubble-border-radius: 18px;
  --sheet-border-radius: 20px;
  --message-input-border-radius: 24px;
  --reaction-palette-border-radius: 30px;
  --avatar-border-radius: 50%;
  --labeler-avatar-border-radius: 20%;
  --circular-button-border-radius: 50%;
  --pill-button-border-radius: 999px;
  --label-badge-border-radius: 999px;

  --sheet-top: 16px;
  --stacked-sheet-top: calc(var(--sheet-top) + 16px);

  /* z-index */
  --profile-header-z-index: 1;
  --context-menu-z-index: 2;
  --header-z-index: 3;
  --footer-z-index: 3;
  --floating-back-button-z-index: 3;
  --reply-prompt-z-index: 4;
  --message-input-z-index: 4;
  --reaction-palette-z-index: 5;
  --toast-z-index: 5;
  --fab-z-index: 6;
  --sidebar-z-index: 8;
  --lightbox-container-z-index: 9;
  --lightbox-z-index: 10;
  --mention-typeahead-z-index: 10;
  --lightbox-close-z-index: 11;

  /* sizing */
  --font-size: 15px;
  --rich-text-emoji-scale: 1.85;
  --hair: 1px;
  --chat-detail-header-height: 56px;
  --footer-height: 55px;
  --post-thread-reply-prompt-height: 50px;
  --message-input-min-height: 70px;
  --sidebar-max-width: 300px;
  --safe-area-inset-bottom: 0px; /* this needs to be in px because it's used in calc */

  /* overlays */
  --overlay-color: rgba(0, 0, 0, 0.5);
  --overlay-color-medium: rgba(0, 0, 0, 0.6);
  --overlay-color-heavy: rgba(0, 0, 0, 0.7);
  --overlay-color-darker: rgba(0, 0, 0, 0.8);
  --overlay-color-darkest: rgba(0, 0, 0, 0.9);
  --overlay-text-color: white;

  /* shadows */
  --shadow-color-swatch: 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-color-subtle: 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-color-light: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-color-medium: 0 4px 20px rgba(0, 0, 0, 0.3);
  --shadow-color-heavy: 0 -2px 20px rgba(0, 0, 0, 0.4);
  --shadow-color-hover: 0 6px 16px rgba(0, 0, 0, 0.2);
  --shadow-color-sidebar: 5px 5px 10px 5px rgba(0, 0, 0, 0.05);
  --shadow-color-lightbox: 0 0 20px rgba(0, 0, 0, 0.3);
  --shadow-color-toast: light-dark(
    0 0 10px 0 rgba(0, 0, 0, 0.1),
    0 0 10px 0 rgba(0, 0, 0, 0.3)
  );

  /* skeleton gradient */
  --skeleton-gradient-edge: light-dark(
    rgba(0, 0, 0, 0.03),
    rgba(255, 255, 255, 0.05)
  );
  --skeleton-gradient-mid: light-dark(
    rgba(0, 0, 0, 0.08),
    rgba(255, 255, 255, 0.1)
  );

  /* indicator backgrounds */
  --alt-indicator-background: rgba(26, 26, 26, 0.75);

  /* base styles */
  background: var(--background-color);
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text-color);
  font-size: var(--font-size);
  scrollbar-gutter: stable;
}

/* https://stackoverflow.com/a/60054892 */
@media (-webkit-min-device-pixel-ratio: 2),
  (min-resolution: 192dpi),
  (min-resolution: 2dppx) {
  html {
    --hair: 0.5px;
  }
}

/* https://github.com/ionic-team/capacitor/issues/8121 */
body.native {
  --safe-area-inset-bottom: 1.75em;
}

/* Installed as a PWA (e.g. added to the iOS home screen) */
@media (display-mode: standalone) {
  html {
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* Don't show backdrop for modals by default */
*::backdrop {
  background-color: transparent;
}

*[role="button"] {
  cursor: pointer;
}

a {
  text-decoration: none;
  color: inherit;
}

hr {
  border: none;
  height: var(--hair);
  background-color: var(--post-border-color);
}

/* visually hide alt text */
img {
  font-size: 0;
}

/* Fixes display bug with moderation warning */
label {
  cursor: inherit;
}

video {
  display: flex;
  width: 100%;
  height: auto;
}

.page {
  width: 100%;
  min-height: 100%;
  min-height: calc(100dvh - var(--safe-area-inset-bottom));
  background-color: var(--background-color);
}

.page.page-hidden {
  display: none;
}

.page.page-visible {
  display: block;
}

#main-layout.layout-hidden {
  display: none;
}

.main-layout-wrapper {
  display: contents;
}

@media (max-width: 799px) {
  .view-column-center main {
    padding-bottom: calc(var(--footer-height) + var(--safe-area-inset-bottom));
  }

  .view-column-center main.chat-detail-main {
    padding-bottom: 0;
  }
}

.container {
  display: flex;
  margin: 0 auto;
}

@media (min-width: 800px) {
  .view-columns {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  .view-column-left {
    flex: 1 1 var(--sidebar-max-width);
    min-width: 0;
    max-width: var(--sidebar-max-width);
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }

  .view-column-center {
    box-sizing: border-box;
    flex: 1;
    border-right: var(--hair) solid var(--post-border-color);
    border-left: var(--hair) solid var(--post-border-color);
    min-width: 600px;
    max-width: 700px;
  }

  .view-column-right {
    flex: 1 1 var(--sidebar-max-width);
    min-width: 0;
    max-width: var(--sidebar-max-width);
  }
}

.rich-text {
  white-space: pre-wrap;
  word-wrap: break-word;
}

plugin-rich-text {
  display: contents;
}

plugin-slot:empty {
  display: none;
}

.rich-text a {
  color: var(--text-link-color);
}

.rich-text-block {
  white-space: normal;
}

.rich-text-facet-pending {
  display: none;
}

.rich-text-emoji-only {
  font-size: calc(1em * var(--rich-text-emoji-scale, 1.85));
  line-height: 1.15;
}

@media (hover: hover) {
  .rich-text a:hover {
    text-decoration: underline;
  }
}