html, #daily-companion-wrapper {
  background: var(--theme-background-default);
  color: var(--theme-text-primary);
  height: stretch;
}
body {
  min-width: 20rem;
  overflow-y: scroll;
  min-height: 100vh;
  /* mobile viewport bug fix */
  min-height: stretch;

  &.ReactModal__Body--open .ReactModal__Content,
  &.ReactModal__Body--open .ReactModal__Content > * {
    overscroll-behavior-y: none;
  }

  &.companion {
    min-width: auto;
    overflow: hidden;
  }

  &.hidden-scrollbar {
    overflow: hidden;

    @screen laptop {
      padding-right: 0.5rem;
    }
  }

  overflow-x: hidden;

  @screen mobileL {
    display: flex;
    flex-direction: column;
  }

  @screen laptop {
    display: block;
  }
}

@define-mixin dark-mode {
  /* Background colors */
  --theme-background-default: theme('colors.raw.pepper.90');
  --theme-background-subtle: theme('colors.raw.pepper.70');
  --theme-background-popover: theme('colors.raw.pepper.70');
  --theme-background-post-post: theme('colors.raw.pepper.70');
  --theme-background-post-disabled: var(--theme-background-default);

  /* Accent colors */
  /* Burger */
  --theme-accent-burger-subtlest: theme('colors.raw.burger.10');
  --theme-accent-burger-subtler: theme('colors.raw.burger.20');
  --theme-accent-burger-subtle: theme('colors.raw.burger.30');
  --theme-accent-burger-default: theme('colors.raw.burger.40');
  --theme-accent-burger-bolder: theme('colors.raw.burger.50');
  /* Blue Cheese */
  --theme-accent-blueCheese-subtlest: theme('colors.raw.blueCheese.10');
  --theme-accent-blueCheese-subtler: theme('colors.raw.blueCheese.20');
  --theme-accent-blueCheese-subtle: theme('colors.raw.blueCheese.30');
  --theme-accent-blueCheese-default: theme('colors.raw.blueCheese.40');
  --theme-accent-blueCheese-bolder: theme('colors.raw.blueCheese.50');
  /* Avocado */
  --theme-accent-avocado-subtlest: theme('colors.raw.avocado.10');
  --theme-accent-avocado-subtler: theme('colors.raw.avocado.20');
  --theme-accent-avocado-subtle: theme('colors.raw.avocado.30');
  --theme-accent-avocado-default: theme('colors.raw.avocado.40');
  --theme-accent-avocado-bolder: theme('colors.raw.avocado.50');
  /* Cheese */
  --theme-accent-cheese-subtlest: theme('colors.raw.cheese.10');
  --theme-accent-cheese-subtler: theme('colors.raw.cheese.20');
  --theme-accent-cheese-subtle: theme('colors.raw.cheese.30');
  --theme-accent-cheese-default: theme('colors.raw.cheese.40');
  --theme-accent-cheese-bolder: theme('colors.raw.cheese.50');
  /* Salt */
  --theme-accent-salt-baseline: theme('colors.raw.salt.0');
  --theme-accent-salt-subtlest: theme('colors.raw.salt.20');
  --theme-accent-salt-subtler: theme('colors.raw.salt.50');
  --theme-accent-salt-subtle: theme('colors.raw.salt.70');
  --theme-accent-salt-default: theme('colors.raw.salt.90');
  --theme-accent-salt-bolder: theme('colors.raw.pepper.10');
  /* Onion */
  --theme-accent-onion-subtlest: theme('colors.raw.onion.10');
  --theme-accent-onion-subtler: theme('colors.raw.onion.20');
  --theme-accent-onion-subtle: theme('colors.raw.onion.30');
  --theme-accent-onion-default: theme('colors.raw.onion.40');
  --theme-accent-onion-bolder: theme('colors.raw.onion.50');
  /* Water */
  --theme-accent-water-subtlest: theme('colors.raw.water.10');
  --theme-accent-water-subtler: theme('colors.raw.water.20');
  --theme-accent-water-subtle: theme('colors.raw.water.30');
  --theme-accent-water-default: theme('colors.raw.water.40');
  --theme-accent-water-bolder: theme('colors.raw.water.50');
  /* Pepper */
  --theme-accent-pepper-baseline: theme('colors.raw.pepper.90');
  --theme-accent-pepper-subtlest: theme('colors.raw.pepper.80');
  --theme-accent-pepper-subtler: theme('colors.raw.pepper.50');
  --theme-accent-pepper-subtle: theme('colors.raw.pepper.30');
  --theme-accent-pepper-default: theme('colors.raw.pepper.10');
  --theme-accent-pepper-bolder: theme('colors.raw.salt.90');
  /* Lettuce */
  --theme-accent-lettuce-subtlest: theme('colors.raw.lettuce.10');
  --theme-accent-lettuce-subtler: theme('colors.raw.lettuce.20');
  --theme-accent-lettuce-subtle: theme('colors.raw.lettuce.30');
  --theme-accent-lettuce-default: theme('colors.raw.lettuce.40');
  --theme-accent-lettuce-bolder: theme('colors.raw.lettuce.50');
  /* Bun */
  --theme-accent-bun-subtlest: theme('colors.raw.bun.10');
  --theme-accent-bun-subtler: theme('colors.raw.bun.20');
  --theme-accent-bun-subtle: theme('colors.raw.bun.30');
  --theme-accent-bun-default: theme('colors.raw.bun.40');
  --theme-accent-bun-bolder: theme('colors.raw.bun.50');
  /* Ketchup */
  --theme-accent-ketchup-subtlest: theme('colors.raw.ketchup.10');
  --theme-accent-ketchup-subtler: theme('colors.raw.ketchup.20');
  --theme-accent-ketchup-subtle: theme('colors.raw.ketchup.30');
  --theme-accent-ketchup-default: theme('colors.raw.ketchup.40');
  --theme-accent-ketchup-bolder: theme('colors.raw.ketchup.50');
  /* Cabbage */
  --theme-accent-cabbage-subtlest: theme('colors.raw.cabbage.10');
  --theme-accent-cabbage-subtler: theme('colors.raw.cabbage.20');
  --theme-accent-cabbage-subtle: theme('colors.raw.cabbage.30');
  --theme-accent-cabbage-default: theme('colors.raw.cabbage.40');
  --theme-accent-cabbage-bolder: theme('colors.raw.cabbage.50');
  /* Bacon */
  --theme-accent-bacon-subtlest: theme('colors.raw.bacon.10');
  --theme-accent-bacon-subtler: theme('colors.raw.bacon.20');
  --theme-accent-bacon-subtle: theme('colors.raw.bacon.30');
  --theme-accent-bacon-default: theme('colors.raw.bacon.40');
  --theme-accent-bacon-bolder: theme('colors.raw.bacon.50');

  /* Brand */
  --theme-brand-subtler: var(--theme-accent-cabbage-subtler);
  --theme-brand-default: var(--theme-accent-cabbage-default);
  --theme-brand-bolder: var(--theme-accent-cabbage-bolder);
  --theme-brand-float: color-mix(in srgb, var(--theme-brand-bolder), transparent 92%);
  --theme-brand-hover: color-mix(in srgb, var(--theme-brand-bolder), transparent 88%);
  --theme-brand-active: color-mix(in srgb, var(--theme-brand-bolder), transparent 84%);

  /* Surface */
  --theme-surface-primary: theme('colors.raw.salt.0');
  --theme-surface-secondary: theme('colors.raw.salt.90');
  --theme-surface-invert: theme('colors.raw.pepper.90');
  --theme-surface-float: color-mix(in srgb, var(--theme-surface-secondary), transparent 92%);
  --theme-surface-hover: color-mix(in srgb, var(--theme-surface-secondary), transparent 88%);
  --theme-surface-active: color-mix(in srgb, var(--theme-surface-secondary), transparent 84%);
  --theme-surface-disabled: color-mix(in srgb, var(--theme-surface-secondary), transparent 80%);
  --theme-surface-focus: theme('colors.raw.blueCheese.40');

  /* Actions */
  /* Upvote */
  --theme-actions-upvote-default: var(--theme-accent-avocado-default);
  --theme-actions-upvote-float: color-mix(in srgb, var(--theme-accent-avocado-bolder), transparent 92%);
  --theme-actions-upvote-hover: color-mix(in srgb, var(--theme-accent-avocado-bolder), transparent 88%);
  --theme-actions-upvote-active: color-mix(in srgb, var(--theme-accent-avocado-bolder), transparent 84%);
  /* Downvote */
  --theme-actions-downvote-default: var(--theme-accent-ketchup-default);
  --theme-actions-downvote-float: color-mix(in srgb, var(--theme-accent-ketchup-bolder), transparent 92%);
  --theme-actions-downvote-hover: color-mix(in srgb, var(--theme-accent-ketchup-bolder), transparent 88%);
  --theme-actions-downvote-active: color-mix(in srgb, var(--theme-accent-ketchup-bolder), transparent 84%);
  /* Comment */
  --theme-actions-comment-default: var(--theme-accent-blueCheese-default);
  --theme-actions-comment-float: color-mix(in srgb, var(--theme-accent-blueCheese-bolder), transparent 92%);
  --theme-actions-comment-hover: color-mix(in srgb, var(--theme-accent-blueCheese-bolder), transparent 88%);
  --theme-actions-comment-active: color-mix(in srgb, var(--theme-accent-blueCheese-bolder), transparent 84%);
  /* Bookmark */
  --theme-actions-bookmark-default: var(--theme-accent-bun-default);
  --theme-actions-bookmark-float: color-mix(in srgb, var(--theme-accent-bun-bolder), transparent 92%);
  --theme-actions-bookmark-hover: color-mix(in srgb, var(--theme-accent-bun-bolder), transparent 88%);
  --theme-actions-bookmark-active: color-mix(in srgb, var(--theme-accent-bun-bolder), transparent 84%);
  /* Share */
  --theme-actions-share-default: var(--theme-accent-cabbage-default);
  --theme-actions-share-float: color-mix(in srgb, var(--theme-accent-cabbage-bolder), transparent 92%);
  --theme-actions-share-hover: color-mix(in srgb, var(--theme-accent-cabbage-bolder), transparent 88%);
  --theme-actions-share-active: color-mix(in srgb, var(--theme-accent-cabbage-bolder), transparent 84%);
  /* Plus */
  --theme-actions-plus-default: var(--theme-accent-bacon-default);
  --theme-actions-plus-float: color-mix(in srgb, var(--theme-accent-bacon-bolder), transparent 92%);
  --theme-actions-plus-hover: color-mix(in srgb, var(--theme-accent-bacon-bolder), transparent 88%);
  --theme-actions-plus-active: color-mix(in srgb, var(--theme-accent-bacon-bolder), transparent 84%);
  /* Help */
  --theme-actions-help-default: var(--status-help);
  --theme-actions-help-float: color-mix(in srgb, var(--theme-actions-help-default), transparent 92%);
  --theme-actions-help-hover: color-mix(in srgb, var(--theme-actions-help-default), transparent 88%);
  --theme-actions-help-active: color-mix(in srgb, var(--theme-actions-help-default), transparent 84%);


  /* Overlay */
  --theme-overlay-base-primary: color-mix(in srgb, var(--theme-accent-onion-subtlest), transparent 36%);
  --theme-overlay-base-secondary: color-mix(in srgb, var(--theme-accent-onion-subtlest), transparent 60%);
  --theme-overlay-base-tertiary: color-mix(in srgb, var(--theme-accent-onion-subtlest), transparent 68%);
  --theme-overlay-base-quaternary: color-mix(in srgb, var(--theme-accent-onion-subtlest), transparent 76%);
  /* Dark */
  --theme-overlay-dark-dark1: color-mix(in srgb, theme('colors.raw.pepper.90'), transparent 68%);
  --theme-overlay-dark-dark2: color-mix(in srgb, theme('colors.raw.pepper.90'), transparent 60%);
  --theme-overlay-dark-dark3: color-mix(in srgb, theme('colors.raw.pepper.90'), transparent 36%);

  /* Border */
  /* Subtlest */
  --theme-border-subtlest-primary: var(--theme-accent-salt-default);
  --theme-border-subtlest-secondary: color-mix(in srgb, var(--theme-border-subtlest-primary), transparent 60%);
  --theme-border-subtlest-tertiary: color-mix(in srgb, var(--theme-border-subtlest-primary), transparent 80%);
  --theme-border-subtlest-quaternary: color-mix(in srgb, var(--theme-border-subtlest-primary), transparent 92%);
  /* Bolder */
  --theme-border-bolder-primary: var(--theme-accent-salt-bolder);
  --theme-border-bolder-secondary: color-mix(in srgb, var(--theme-border-bolder-primary), transparent 60%);
  --theme-border-bolder-tertiary: color-mix(in srgb, var(--theme-border-bolder-primary), transparent 80%);
  --theme-border-bolder-quaternary: color-mix(in srgb, var(--theme-border-bolder-primary), transparent 92%);

  /* Status */
  --status-error: var(--theme-accent-ketchup-default);
  --status-warning: var(--theme-accent-bun-default);
  --status-help: var(--theme-accent-cheese-default);
  --status-success: var(--theme-accent-avocado-default);
  --theme-status-info: var(--theme-accent-water-default);

  /* Text */
  --theme-text-primary: var(--theme-accent-salt-baseline);
  --theme-text-secondary: var(--theme-accent-salt-subtler);
  --theme-text-tertiary: var(--theme-accent-salt-default);
  --theme-text-quaternary: color-mix(in srgb, var(--theme-accent-salt-default), transparent 36%);
  --theme-text-disabled: color-mix(in srgb, var(--theme-accent-salt-default), transparent 68%);
  --theme-text-link: var(--theme-accent-water-subtler);
  /* Highlight */
  --theme-text-highlight-default: color-mix(in srgb, var(--theme-accent-cabbage-bolder), transparent 76%);
  --theme-text-highlight-hover: color-mix(in srgb, var(--theme-accent-cabbage-bolder), transparent 68%);

  /* Shadow */
  --theme-shadow-shadow1: color-mix(in srgb, theme('colors.raw.pepper.90'), transparent 68%);
  --theme-shadow-shadow2: color-mix(in srgb, theme('colors.raw.pepper.90'), transparent 60%);
  --theme-shadow-shadow3: color-mix(in srgb, theme('colors.raw.pepper.90'), transparent 36%);
  --theme-shadow-cabbage: theme('colors.raw.cabbage.40');

  /* Blur */
  --theme-blur-blur-highlight: color-mix(in srgb, theme('colors.raw.pepper.70'), transparent 12%);
  --theme-blur-blur-baseline: color-mix(in srgb, theme('colors.raw.pepper.90'), transparent 12%);
  --theme-blur-blur-bg: color-mix(in srgb, theme('colors.raw.pepper.90'), transparent 36%);
  --theme-blur-blur-glass: color-mix(in srgb, theme('colors.raw.salt.90'), transparent 92%);

/**
  * Current old colors, these should all be changed to one of the above matching ones.
 */
  --theme-active: theme('colors.raw.salt.90')33;

  --theme-shadow2: theme('boxShadow.2-black');
  --theme-shadow3: theme('boxShadow.3-black');

  --theme-post-disabled: theme('colors.raw.pepper.70')66;
  --theme-overlay-quaternary: theme('colors.overlay.quaternary.white');
  --theme-overlay-water: theme('colors.overlay.quaternary.water');
  --theme-overlay-cabbage: theme('colors.overlay.quaternary.cabbage');
  --theme-overlay-from: theme('colors.raw.onion.40')30;
  --theme-overlay-to: theme('colors.raw.cabbage.40')30;

  --theme-overlay-float-bun: theme('colors.overlay.float.bun');
  --theme-overlay-float-blueCheese: theme('colors.overlay.float.blueCheese');
  --theme-overlay-float-cabbage: theme('colors.overlay.float.cabbage');
  --theme-overlay-float-avocado: theme('colors.overlay.float.avocado');
  --theme-overlay-float-ketchup: theme('colors.overlay.float.ketchup');

  --theme-overlay-active-cabbage: theme('colors.overlay.active.cabbage');
  --theme-overlay-active-onion: theme('colors.overlay.active.onion');
  --theme-overlay-active-salt: theme('colors.overlay.active.salt');

  --theme-gradient-cabbage: theme('colors.raw.cabbage.10')66;
  --theme-gradient-onion: theme('colors.raw.onion.10')66;

  --theme-rank-highlight: theme('colors.raw.salt.10');

  --theme-rank-1-color: theme('colors.raw.salt.90');
  --theme-rank-1-color-top: theme('colors.raw.salt.90');
  --theme-rank-1-color-bottom: theme('colors.raw.pepper.10');

  --theme-rank-2-color: theme('colors.raw.burger.40');
  --theme-rank-2-color-top: theme('colors.raw.burger.40');
  --theme-rank-2-color-bottom: theme('colors.raw.bun.40');

  --theme-rank-3-color: theme('colors.raw.salt.10');
  --theme-rank-3-color-top: theme('colors.raw.salt.10');
  --theme-rank-3-color-bottom: theme('colors.raw.salt.90');

  --theme-rank-4-color: theme('colors.raw.cheese.40');
  --theme-rank-4-color-top: theme('colors.raw.cheese.40');
  --theme-rank-4-color-bottom: theme('colors.raw.bun.40');

  --theme-rank-5-color: theme('colors.raw.blueCheese.40');
  --theme-rank-5-color-top: theme('colors.raw.water.40');
  --theme-rank-5-color-bottom: theme('colors.raw.blueCheese.40');

  --theme-rank-6-color: theme('colors.raw.cabbage.40');
  --theme-rank-6-color-top: theme('colors.raw.cabbage.40');
  --theme-rank-6-color-bottom: theme('colors.raw.onion.40');

  --theme-rank-7-color: theme('colors.raw.bacon.40');
  --theme-rank-7-color-top: theme('colors.raw.bacon.40');
  --theme-rank-7-color-bottom: theme('colors.raw.ketchup.40');

  --theme-highlight-comment: theme('colors.raw.salt.10');
  --theme-highlight-red: theme('colors.raw.ketchup.20');
  --theme-highlight-orange: theme('colors.raw.bun.20');
  --theme-highlight-yellow: theme('colors.raw.cheese.20');
  --theme-highlight-green: theme('colors.raw.avocado.20');
  --theme-highlight-aqua: theme('colors.raw.blueCheese.20');
  --theme-highlight-blue: theme('colors.raw.water.20');
  --theme-highlight-purple: theme('colors.raw.onion.20');
  --theme-highlight-label: theme('colors.raw.salt.50');
}

@define-mixin light-mode {
  /* Background colors */
  --theme-background-default: theme('colors.raw.salt.0');
  --theme-background-subtle: theme('colors.raw.salt.10');
  --theme-background-popover: theme('colors.raw.salt.0');
  --theme-background-post-post: theme('colors.raw.salt.10');
  --theme-background-post-disabled: var(--theme-background-default);

  /* Accent colors */
  /* Burger */
  --theme-accent-burger-subtlest: theme('colors.raw.burger.90');
  --theme-accent-burger-subtler: theme('colors.raw.burger.80');
  --theme-accent-burger-subtle: theme('colors.raw.burger.70');
  --theme-accent-burger-default: theme('colors.raw.burger.60');
  --theme-accent-burger-bolder: theme('colors.raw.burger.50');
  /* Blue Cheese */
  --theme-accent-blueCheese-subtlest: theme('colors.raw.blueCheese.90');
  --theme-accent-blueCheese-subtler: theme('colors.raw.blueCheese.80');
  --theme-accent-blueCheese-subtle: theme('colors.raw.blueCheese.70');
  --theme-accent-blueCheese-default: theme('colors.raw.blueCheese.60');
  --theme-accent-blueCheese-bolder: theme('colors.raw.blueCheese.50');
  /* Avocado */
  --theme-accent-avocado-subtlest: theme('colors.raw.avocado.90');
  --theme-accent-avocado-subtler: theme('colors.raw.avocado.80');
  --theme-accent-avocado-subtle: theme('colors.raw.avocado.70');
  --theme-accent-avocado-default: theme('colors.raw.avocado.60');
  --theme-accent-avocado-bolder: theme('colors.raw.avocado.50');
  /* Cheese */
  --theme-accent-cheese-subtlest: theme('colors.raw.cheese.90');
  --theme-accent-cheese-subtler: theme('colors.raw.cheese.80');
  --theme-accent-cheese-subtle: theme('colors.raw.cheese.70');
  --theme-accent-cheese-default: theme('colors.raw.cheese.60');
  --theme-accent-cheese-bolder: theme('colors.raw.cheese.50');
  /* Salt */
  --theme-accent-salt-baseline: theme('colors.raw.pepper.90');
  --theme-accent-salt-subtlest: theme('colors.raw.pepper.80');
  --theme-accent-salt-subtler: theme('colors.raw.pepper.50');
  --theme-accent-salt-subtle: theme('colors.raw.pepper.30');
  --theme-accent-salt-default: theme('colors.raw.pepper.10');
  --theme-accent-salt-bolder: theme('colors.raw.salt.90');
  /* Onion */
  --theme-accent-onion-subtlest: theme('colors.raw.onion.90');
  --theme-accent-onion-subtler: theme('colors.raw.onion.80');
  --theme-accent-onion-subtle: theme('colors.raw.onion.70');
  --theme-accent-onion-default: theme('colors.raw.onion.60');
  --theme-accent-onion-bolder: theme('colors.raw.onion.50');
  /* Water */
  --theme-accent-water-subtlest: theme('colors.raw.water.90');
  --theme-accent-water-subtler: theme('colors.raw.water.80');
  --theme-accent-water-subtle: theme('colors.raw.water.70');
  --theme-accent-water-default: theme('colors.raw.water.60');
  --theme-accent-water-bolder: theme('colors.raw.water.50');
  /* Pepper */
  --theme-accent-pepper-baseline: theme('colors.raw.salt.0');
  --theme-accent-pepper-subtlest: theme('colors.raw.salt.20');
  --theme-accent-pepper-subtler: theme('colors.raw.salt.50');
  --theme-accent-pepper-subtle: theme('colors.raw.salt.70');
  --theme-accent-pepper-default: theme('colors.raw.salt.90');
  --theme-accent-pepper-bolder: theme('colors.raw.pepper.10');
  /* Lettuce */
  --theme-accent-lettuce-subtlest: theme('colors.raw.lettuce.90');
  --theme-accent-lettuce-subtler: theme('colors.raw.lettuce.80');
  --theme-accent-lettuce-subtle: theme('colors.raw.lettuce.70');
  --theme-accent-lettuce-default: theme('colors.raw.lettuce.60');
  --theme-accent-lettuce-bolder: theme('colors.raw.lettuce.50');
  /* Bun */
  --theme-accent-bun-subtlest: theme('colors.raw.bun.90');
  --theme-accent-bun-subtler: theme('colors.raw.bun.80');
  --theme-accent-bun-subtle: theme('colors.raw.bun.70');
  --theme-accent-bun-default: theme('colors.raw.bun.60');
  --theme-accent-bun-bolder: theme('colors.raw.bun.50');
  /* Ketchup */
  --theme-accent-ketchup-subtlest: theme('colors.raw.ketchup.90');
  --theme-accent-ketchup-subtler: theme('colors.raw.ketchup.80');
  --theme-accent-ketchup-subtle: theme('colors.raw.ketchup.70');
  --theme-accent-ketchup-default: theme('colors.raw.ketchup.60');
  --theme-accent-ketchup-bolder: theme('colors.raw.ketchup.50');
  /* Cabbage */
  --theme-accent-cabbage-subtlest: theme('colors.raw.cabbage.90');
  --theme-accent-cabbage-subtler: theme('colors.raw.cabbage.80');
  --theme-accent-cabbage-subtle: theme('colors.raw.cabbage.70');
  --theme-accent-cabbage-default: theme('colors.raw.cabbage.60');
  --theme-accent-cabbage-bolder: theme('colors.raw.cabbage.50');
  /* Bacon */
  --theme-accent-bacon-subtlest: theme('colors.raw.bacon.90');
  --theme-accent-bacon-subtler: theme('colors.raw.bacon.80');
  --theme-accent-bacon-subtle: theme('colors.raw.bacon.70');
  --theme-accent-bacon-default: theme('colors.raw.bacon.60');
  --theme-accent-bacon-bolder: theme('colors.raw.bacon.50');

  /* Brand */
  --theme-brand-subtler: var(--theme-accent-cabbage-subtler);
  --theme-brand-default: var(--theme-accent-cabbage-default);
  --theme-brand-bolder: var(--theme-accent-cabbage-bolder);
  --theme-brand-float: color-mix(in srgb, var(--theme-brand-bolder), transparent 92%);
  --theme-brand-hover: color-mix(in srgb, var(--theme-brand-bolder), transparent 88%);
  --theme-brand-active: color-mix(in srgb, var(--theme-brand-bolder), transparent 84%);

  /* Surface */
  --theme-surface-primary: theme('colors.raw.pepper.90');
  --theme-surface-secondary: theme('colors.raw.pepper.10');
  --theme-surface-invert: theme('colors.raw.salt.0');
  --theme-surface-float: color-mix(in srgb, var(--theme-surface-secondary), transparent 92%);
  --theme-surface-hover: color-mix(in srgb, var(--theme-surface-secondary), transparent 88%);
  --theme-surface-active: color-mix(in srgb, var(--theme-surface-secondary), transparent 84%);
  --theme-surface-disabled: color-mix(in srgb, var(--theme-surface-secondary), transparent 80%);
  --theme-surface-focus: theme('colors.raw.blueCheese.60');

  /* Actions */
  /* Upvote */
  --theme-actions-upvote-default: var(--theme-accent-avocado-default);
  --theme-actions-upvote-float: color-mix(in srgb, var(--theme-accent-avocado-bolder), transparent 92%);
  --theme-actions-upvote-hover: color-mix(in srgb, var(--theme-accent-avocado-bolder), transparent 88%);
  --theme-actions-upvote-active: color-mix(in srgb, var(--theme-accent-avocado-bolder), transparent 84%);
  /* Downvote */
  --theme-actions-downvote-default: var(--theme-accent-ketchup-default);
  --theme-actions-downvote-float: color-mix(in srgb, var(--theme-accent-ketchup-bolder), transparent 92%);
  --theme-actions-downvote-hover: color-mix(in srgb, var(--theme-accent-ketchup-bolder), transparent 88%);
  --theme-actions-downvote-active: color-mix(in srgb, var(--theme-accent-ketchup-bolder), transparent 84%);
  /* Comment */
  --theme-actions-comment-default: var(--theme-accent-blueCheese-default);
  --theme-actions-comment-float: color-mix(in srgb, var(--theme-accent-blueCheese-bolder), transparent 92%);
  --theme-actions-comment-hover: color-mix(in srgb, var(--theme-accent-blueCheese-bolder), transparent 88%);
  --theme-actions-comment-active: color-mix(in srgb, var(--theme-accent-blueCheese-bolder), transparent 84%);
  /* Bookmark */
  --theme-actions-bookmark-default: var(--theme-accent-bun-default);
  --theme-actions-bookmark-float: color-mix(in srgb, var(--theme-accent-bun-bolder), transparent 92%);
  --theme-actions-bookmark-hover: color-mix(in srgb, var(--theme-accent-bun-bolder), transparent 88%);
  --theme-actions-bookmark-active: color-mix(in srgb, var(--theme-accent-bun-bolder), transparent 84%);
  /* Share */
  --theme-actions-share-default: var(--theme-accent-cabbage-default);
  --theme-actions-share-float: color-mix(in srgb, var(--theme-accent-cabbage-bolder), transparent 92%);
  --theme-actions-share-hover: color-mix(in srgb, var(--theme-accent-cabbage-bolder), transparent 88%);
  --theme-actions-share-active: color-mix(in srgb, var(--theme-accent-cabbage-bolder), transparent 84%);
  /* Plus */
  --theme-actions-plus-default: var(--theme-accent-bacon-default);
  --theme-actions-plus-float: color-mix(in srgb, var(--theme-accent-bacon-bolder), transparent 92%);
  --theme-actions-plus-hover: color-mix(in srgb, var(--theme-accent-bacon-bolder), transparent 88%);
  --theme-actions-plus-active: color-mix(in srgb, var(--theme-accent-bacon-bolder), transparent 84%);
  /* Help */
  --theme-actions-help-default: var(--status-help);
  --theme-actions-help-float: color-mix(in srgb, var(--theme-actions-help-default), transparent 92%);
  --theme-actions-help-hover: color-mix(in srgb, var(--theme-actions-help-default), transparent 88%);
  --theme-actions-help-active: color-mix(in srgb, var(--theme-actions-help-default), transparent 84%);

  /* Overlay */
  --theme-overlay-base-primary: color-mix(in srgb, var(--theme-accent-onion-subtlest), transparent 36%);
  --theme-overlay-base-secondary: color-mix(in srgb, var(--theme-accent-onion-subtlest), transparent 60%);
  --theme-overlay-base-tertiary: color-mix(in srgb, var(--theme-accent-onion-subtlest), transparent 68%);
  --theme-overlay-base-quaternary: color-mix(in srgb, var(--theme-accent-onion-subtlest), transparent 76%);
  /* Dark */
  --theme-overlay-dark-dark1: color-mix(in srgb, theme('colors.raw.pepper.10'), transparent 68%);
  --theme-overlay-dark-dark2: color-mix(in srgb, theme('colors.raw.pepper.10'), transparent 60%);
  --theme-overlay-dark-dark3: color-mix(in srgb, theme('colors.raw.pepper.10'), transparent 36%);

  /* Border */
  /* Subtlest */
  --theme-border-subtlest-primary: var(--theme-accent-salt-default);
  --theme-border-subtlest-secondary: color-mix(in srgb, var(--theme-border-subtlest-primary), transparent 60%);
  --theme-border-subtlest-tertiary: color-mix(in srgb, var(--theme-border-subtlest-primary), transparent 80%);
  --theme-border-subtlest-quaternary: color-mix(in srgb, var(--theme-border-subtlest-primary), transparent 92%);
  /* Bolder */
  --theme-border-bolder-primary: var(--theme-accent-salt-bolder);
  --theme-border-bolder-secondary: color-mix(in srgb, var(--theme-border-bolder-primary), transparent 60%);
  --theme-border-bolder-tertiary: color-mix(in srgb, var(--theme-border-bolder-primary), transparent 80%);
  --theme-border-bolder-quaternary: color-mix(in srgb, var(--theme-border-bolder-primary), transparent 92%);

  /* Status */
  --status-error: var(--theme-accent-ketchup-default);
  --status-warning: var(--theme-accent-bun-default);
  --status-help: var(--theme-accent-cheese-default);
  --status-success: var(--theme-accent-avocado-default);
  --theme-status-info: var(--theme-accent-water-default);

  /* Text */
  --theme-text-primary: var(--theme-accent-salt-baseline);
  --theme-text-secondary: var(--theme-accent-salt-subtler);
  --theme-text-tertiary: var(--theme-accent-salt-default);
  --theme-text-quaternary: color-mix(in srgb, var(--theme-accent-salt-default), transparent 36%);
  --theme-text-disabled: color-mix(in srgb, var(--theme-accent-salt-default), transparent 68%);
  --theme-text-link: var(--theme-accent-water-subtler);
  /* Highlight */
  --theme-text-highlight-default: color-mix(in srgb, var(--theme-accent-cabbage-bolder), transparent 76%);
  --theme-text-highlight-hover: color-mix(in srgb, var(--theme-accent-cabbage-bolder), transparent 68%);

  /* Shadow */
  --theme-shadow-shadow1: color-mix(in srgb, theme('colors.raw.salt.90'), transparent 68%);
  --theme-shadow-shadow2: color-mix(in srgb, theme('colors.raw.salt.90'), transparent 60%);
  --theme-shadow-shadow3: color-mix(in srgb, theme('colors.raw.salt.90'), transparent 36%);
  --theme-shadow-cabbage: theme('colors.raw.cabbage.40');

  /* Blur */
  --theme-blur-blur-highlight: color-mix(in srgb, theme('colors.raw.salt.0'), transparent 12%);
  --theme-blur-blur-baseline: color-mix(in srgb, theme('colors.raw.salt.0'), transparent 12%);
  --theme-blur-blur-bg: color-mix(in srgb, theme('colors.raw.salt.0'), transparent 36%);
  --theme-blur-blur-glass: color-mix(in srgb, theme('colors.raw.salt.0'), transparent 36%);








  /**
    * Current old colors, these should all be changed to one of the above matching ones.
   */
  --theme-active: theme('colors.raw.pepper.10')33;
  --theme-post-disabled: #ffffff66;

  --theme-overlay-quaternary: theme('colors.overlay.quaternary.pepper');
  --theme-overlay-water: theme('colors.overlay.quaternary.water');
  --theme-overlay-cabbage: theme('colors.overlay.quaternary.cabbage');
  --theme-overlay-from: theme('colors.raw.onion.40')30;
  --theme-overlay-to: theme('colors.raw.cabbage.40')30;

  --theme-overlay-float-bun: theme('colors.overlay.float.bun');
  --theme-overlay-float-blueCheese: theme('colors.overlay.float.blueCheese');
  --theme-overlay-float-cabbage: theme('colors.overlay.float.cabbage');
  --theme-overlay-float-avocado: theme('colors.overlay.float.avocado');
  --theme-overlay-float-ketchup: theme('colors.overlay.float.ketchup');

  --theme-overlay-active-cabbage: theme('colors.overlay.active.cabbage');
  --theme-overlay-active-onion: theme('colors.overlay.active.onion');
  --theme-overlay-active-salt: theme('colors.overlay.active.salt');

  --theme-gradient-cabbage: theme('colors.raw.cabbage.10')66;
  --theme-gradient-onion: theme('colors.raw.onion.10')66;

  --theme-rank-highlight: theme('colors.raw.salt.10');

  --theme-rank-1-color: theme('colors.raw.pepper.10');
  --theme-rank-1-color-top: theme('colors.raw.pepper.10');
  --theme-rank-1-color-bottom: theme('colors.raw.pepper.90');

  --theme-rank-2-color: theme('colors.raw.burger.60');
  --theme-rank-2-color-top: theme('colors.raw.burger.60');
  --theme-rank-2-color-bottom: theme('colors.raw.bun.60');

  --theme-rank-3-color: theme('colors.raw.salt.90');
  --theme-rank-3-color-top: theme('colors.raw.salt.90');
  --theme-rank-3-color-bottom: theme('colors.raw.pepper.10');

  --theme-rank-4-color: theme('colors.raw.cheese.60');
  --theme-rank-4-color-top: theme('colors.raw.cheese.60');
  --theme-rank-4-color-bottom: theme('colors.raw.bun.60');

  --theme-rank-5-color: theme('colors.raw.blueCheese.60');
  --theme-rank-5-color-top: theme('colors.raw.water.60');
  --theme-rank-5-color-bottom: theme('colors.raw.blueCheese.60');

  --theme-rank-6-color: theme('colors.raw.cabbage.60');
  --theme-rank-6-color-top: theme('colors.raw.cabbage.60');
  --theme-rank-6-color-bottom: theme('colors.raw.onion.60');

  --theme-rank-7-color: theme('colors.raw.bacon.60');
  --theme-rank-7-color-top: theme('colors.raw.bacon.60');
  --theme-rank-7-color-bottom: theme('colors.raw.ketchup.60');

  --theme-highlight-comment: theme('colors.raw.pepper.10');
  --theme-highlight-red: theme('colors.raw.ketchup.80');
  --theme-highlight-orange: theme('colors.raw.bun.80');
  --theme-highlight-yellow: theme('colors.raw.cheese.80');
  --theme-highlight-green: theme('colors.raw.avocado.80');
  --theme-highlight-aqua: theme('colors.raw.blueCheese.80');
  --theme-highlight-blue: theme('colors.raw.water.80');
  --theme-highlight-purple: theme('colors.raw.onion.80');
  --theme-highlight-label: theme('colors.raw.pepper.50');
}

@media (prefers-color-scheme: light) {
  html.auto,
  html.auto .invert .invert {
    @mixin light-mode;
  }

  html.auto .invert {
    @mixin dark-mode;
  }
}

@media (prefers-color-scheme: dark) {
  html.auto,
  html.auto .invert .invert {
    @mixin dark-mode;
  }

  html.auto .invert {
    @mixin light-mode;
  }
}

html,
html.light .invert,
html .invert .invert,
#daily-companion-wrapper{
  @mixin dark-mode;
}

html.light,
html .invert,
html.light .invert .invert,
#daily-companion-wrapper.light {
  @mixin light-mode;
}

.logo {
  width: 4.313rem;
}

.ReactModal__Body--open #__next.hide-on-modal {
  display: none;

  @screen mobileL {
    display: flex;
  }
}

#__next {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: stretch;

  @screen mobileL {
    flex: 1;
  }

  @screen laptop {
    flex: unset;
  }
}

img.lazyload:not([src]) {
  visibility: hidden;
}

* {
  flex-shrink: 0;
}

.withNavBar {
  margin-bottom: $navBarHeight;

  @screen laptop {
    margin-bottom: 0;
  }
}

.fade-enter-active,
.fade-exit-active {
  transition: opacity 0.5s linear;
  will-change: opacity;
}

.fade-enter {
  opacity: 0;
}

.fade-enter-active,
.fade-exit {
  opacity: 1;
}

.fade-exit-active {
  opacity: 0;
}

@keyframes rank-attention {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

::-webkit-scrollbar {
  width: 0.5rem;
  background-color: transparent;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  border-radius: 0.25rem;
  background: var(--theme-text-tertiary);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--theme-text-primary);
}

::-webkit-scrollbar-thumb:active {
  background: var(--theme-text-primary);
}

summary {
  list-style: none;

  &::-webkit-details-marker {
    display: none;
  }
}

details {
  & .arrow {
    transform: rotate(180deg);
    transition: transform 0.1s linear;
  }

  &[open] {
    & .arrow {
      transform: rotate(0deg);
    }
  }
}
details.right-icon {
  & summary .icon {
    --tw-rotate: 90deg;
  }

  &[open] {
    & summary .icon {
      --tw-rotate: 180deg;
    }
  }
}

.squad-background-fade {
  background: radial-gradient(ellipse, #c029f088 0%, #c029f000 400px);
  background-size: 1200px 500px;
  background-position: center -250px;
  background-repeat: no-repeat;
}

@keyframes pulse {
  0% {
    width: 100%;
    height: 100%;
    opacity: 0;
  }

  5% {
    top: -0.25rem;
    left: -0.25rem;
    width: calc(100% + 0.5rem);
    height: calc(100% + 0.5rem);

    opacity: 1;
  }

  100% {
    top: -1rem;
    left: -1.25rem;
    width: calc(100% + 2.5rem);
    height: calc(100% + 2rem);
    opacity: 0;
    border-radius: 44px;
  }
}

.highlight-pulse {
  position: relative;

  &::before {
    @apply border-accent-cabbage-default;
    content: '';
    z-index: -1;
    position: absolute;
    opacity: 0;
    inset: 0;
    border-width: 4px;
    animation: pulse 1.25s infinite;
    border-radius: 14px;
  }
}

.drawer-padding {
  padding-bottom: max(env(safe-area-inset-bottom, 0.75rem), 0.75rem);
}

.footer-navbar {
  min-height: $navBarHeight;
  grid-column-gap: 0.5rem;
  padding-bottom: max(env(safe-area-inset-bottom, 0.5rem), 0.5rem);
}

.hide-ms-reveal::-ms-reveal {
  display: none;
}

