@use "sass:color";

// context-aware lighten: darkens if dark, lightens if light
@function ctx_lighten($color, $amount) {
  $multiplier: if($isDark, -1, 1);
  @return color.adjust($color, $lightness: $amount * $multiplier);
}

$lvl1: if($isDark, $crust, $base);
$lvl2: $mantle;
$lvl3: if($isDark, $base, $crust);

:root {
  @if $isDark {
    color-scheme: dark;
    --is-dark-theme: true;
  } @else {
    color-scheme: light;
    --is-dark-theme: false;
  }

  accent-color: #{$accent};

  --color-primary: #{$accent};
  --color-primary-contrast: #{$lvl1};

  --color-primary-dark-1: #{ctx_lighten($accent, 3%)};
  --color-primary-dark-2: #{ctx_lighten($accent, 6%)};
  --color-primary-dark-3: #{ctx_lighten($accent, 9%)};
  --color-primary-dark-4: #{ctx_lighten($accent, 12%)};
  --color-primary-dark-5: #{ctx_lighten($accent, 15%)};
  --color-primary-dark-6: #{ctx_lighten($accent, 18%)};
  --color-primary-dark-7: #{ctx_lighten($accent, 21%)};

  --color-primary-light-1: #{ctx_lighten($accent, -3%)};
  --color-primary-light-2: #{ctx_lighten($accent, -6%)};
  --color-primary-light-3: #{ctx_lighten($accent, -9%)};
  --color-primary-light-4: #{ctx_lighten($accent, -12%)};
  --color-primary-light-5: #{ctx_lighten($accent, -15%)};
  --color-primary-light-6: #{ctx_lighten($accent, -18%)};
  --color-primary-light-7: #{ctx_lighten($accent, -21%)};

  --color-primary-alpha-10: #{color.change($accent, $alpha: 0.1)};
  --color-primary-alpha-20: #{color.change($accent, $alpha: 0.2)};
  --color-primary-alpha-30: #{color.change($accent, $alpha: 0.3)};
  --color-primary-alpha-40: #{color.change($accent, $alpha: 0.4)};
  --color-primary-alpha-50: #{color.change($accent, $alpha: 0.5)};
  --color-primary-alpha-60: #{color.change($accent, $alpha: 0.6)};
  --color-primary-alpha-70: #{color.change($accent, $alpha: 0.7)};
  --color-primary-alpha-80: #{color.change($accent, $alpha: 0.8)};
  --color-primary-alpha-90: #{color.change($accent, $alpha: 0.9)};

  --color-secondary: #{$surface1};

  --color-secondary-dark-1: #{ctx_lighten($surface0, -3%)};
  --color-secondary-dark-2: #{ctx_lighten($surface0, -6%)};
  --color-secondary-dark-3: #{ctx_lighten($surface0, -9%)};
  --color-secondary-dark-4: #{ctx_lighten($surface0, -12%)};
  --color-secondary-dark-5: #{ctx_lighten($surface0, -15%)};
  --color-secondary-dark-6: #{ctx_lighten($surface0, -18%)};
  --color-secondary-dark-7: #{ctx_lighten($surface0, -21%)};
  --color-secondary-dark-8: #{ctx_lighten($surface0, -24%)};
  --color-secondary-dark-9: #{ctx_lighten($surface0, -27%)};
  --color-secondary-dark-10: #{ctx_lighten($surface0, -30%)};
  --color-secondary-dark-11: #{ctx_lighten($surface0, -33%)};
  --color-secondary-dark-12: #{ctx_lighten($surface0, -36%)};
  --color-secondary-dark-13: #{ctx_lighten($surface0, -39%)};

  --color-secondary-light-1: #{ctx_lighten($surface0, 3%)};
  --color-secondary-light-2: #{ctx_lighten($surface0, 6%)};
  --color-secondary-light-3: #{ctx_lighten($surface0, 9%)};
  --color-secondary-light-4: #{ctx_lighten($surface0, 12%)};

  --color-secondary-alpha-10: #{color.change($surface0, $alpha: 0.1)};
  --color-secondary-alpha-20: #{color.change($surface0, $alpha: 0.2)};
  --color-secondary-alpha-30: #{color.change($surface0, $alpha: 0.3)};
  --color-secondary-alpha-40: #{color.change($surface0, $alpha: 0.4)};
  --color-secondary-alpha-50: #{color.change($surface0, $alpha: 0.5)};
  --color-secondary-alpha-60: #{color.change($surface0, $alpha: 0.6)};
  --color-secondary-alpha-70: #{color.change($surface0, $alpha: 0.7)};
  --color-secondary-alpha-80: #{color.change($surface0, $alpha: 0.8)};
  --color-secondary-alpha-90: #{color.change($surface0, $alpha: 0.9)};

  /* colors */
  --color-red: #{$red};
  --color-orange: #{$peach};
  --color-yellow: #{$yellow};
  --color-olive: #{$green};
  --color-green: #{$green};
  --color-teal: #{$teal};
  --color-blue: #{$blue};
  --color-violet: #{$lavender};
  --color-purple: #{$mauve};
  --color-pink: #{$pink};
  --color-brown: #{$flamingo};
  --color-grey: #{$overlay2};
  --color-black: #{if(isDark, $mantle, $text)};

  /* light variants - produced via Sass scale-color(color, $lightness: -10%) */
  --color-red-light: #{ctx_lighten($red, 10%)};
  --color-orange-light: #{ctx_lighten($peach, 10%)};
  --color-yellow-light: #{ctx_lighten($yellow, 10%)};
  --color-olive-light: #{ctx_lighten($green, 10%)};
  --color-green-light: #{ctx_lighten($green, 10%)};
  --color-teal-light: #{ctx_lighten($teal, 10%)};
  --color-blue-light: #{ctx_lighten($blue, 10%)};
  --color-violet-light: #{ctx_lighten($lavender, 10%)};
  --color-purple-light: #{ctx_lighten($mauve, 10%)};
  --color-pink-light: #{ctx_lighten($pink, 10%)};
  --color-brown-light: #{ctx_lighten($flamingo, 10%)};
  --color-grey-light: #{ctx_lighten($overlay2, 10%)};
  --color-black-light: #{if(
      isDark,
      ctx_lighten($mantle, 10%),
      ctx_lighten($text, 10%)
    )};

  /* other colors */
  --color-gold: #{$rosewater};
  --color-white: #{$text};
  --color-diff-removed-word-bg: #{color.change($red, $alpha: 0.15)};
  --color-diff-added-word-bg: #{color.change($green, $alpha: 0.15)};
  --color-diff-removed-row-bg: #{color.change($red, $alpha: 0.07)};
  --color-diff-moved-row-bg: #{color.change($yellow, $alpha: 0.07)};
  --color-diff-added-row-bg: #{color.change($green, $alpha: 0.07)};
  --color-diff-removed-row-border: #{color.change($red, $alpha: 0.07)};
  --color-diff-moved-row-border: #{color.change($yellow, $alpha: 0.07)};
  --color-diff-added-row-border: #{color.change($green, $alpha: 0.07)};
  --color-diff-inactive: #{$overlay2};
  --color-error-border: #{$red};
  --color-error-bg: #{$red};
  --color-error-bg-active: #{ctx_lighten($red, 5%)};
  --color-error-bg-hover: #{ctx_lighten($red, 10%)};
  --color-error-text: #{$lvl1};
  --color-success-border: #{ctx_lighten($green, 10%)};
  --color-success-bg: #{$green};
  --color-success-text: #{$lvl1};
  --color-warning-border: #{ctx_lighten($yellow, 10%)};
  --color-warning-bg: #{$yellow};
  --color-warning-text: #{$lvl1};
  --color-info-border: #{ctx_lighten($blue, 10%)};
  --color-info-bg: #{$lvl1};
  --color-info-text: #{$text};
  --color-red-badge: #{ctx_lighten($red, 10%)};
  --color-red-badge-bg: #{$lvl1};
  --color-red-badge-hover-bg: #{ctx_lighten($red, 5%)};
  --color-green-badge: #{$green};
  --color-green-badge-bg: #{$green};
  --color-green-badge-hover-bg: #{ctx_lighten($green, 5%)};
  --color-yellow-badge: #{$yellow};
  --color-yellow-badge-bg: #{$lvl1};
  --color-yellow-badge-hover-bg: #{ctx_lighten($yellow, 5%)};
  --color-orange-badge: #{$peach};
  --color-orange-badge-bg: #{$lvl1};
  --color-orange-badge-hover-bg: #{ctx_lighten($peach, 5%)};
  --color-git: #{$peach};

  /* target-based colors */
  --color-body: #{$lvl1};
  --color-box-header: #{$lvl2};
  --color-box-body: #{$lvl2};
  --color-box-body-highlight: #{$surface0};
  --color-text-dark: #{$subtext0};
  --color-text: #{$text};
  --color-text-light: #{$subtext1};
  --color-text-light-1: #{$subtext1};
  --color-text-light-2: #{$subtext1};
  --color-text-light-3: #{$subtext1};
  --color-footer: #{$lvl2};
  --color-timeline: #{$surface0};
  --color-input-text: #{$text};
  --color-input-background: #{$surface0};
  --color-input-toggle-background: #{$surface0};
  --color-input-border: #{$surface1};
  --color-input-border-hover: #{$surface2};
  --color-nav-bg: #{$lvl2};
  --color-nav-hover-bg: #{$surface0};
  --color-navbar: #{$lvl2};
  --color-navbar-transparent: #{color.change($lvl1, $alpha: 0)};
  --color-light: #{color.change($surface2, $alpha: 0.3)};
  --color-light-mimic-enabled: rgba(
    0,
    0,
    0,
    calc(40 / 255 * 222 / 255 / var(--opacity-disabled))
  );
  --color-light-border: #{$surface2};
  --color-hover: #{color.change($overlay0, $alpha: 0.1)};
  --color-active: #{color.change($text, $alpha: 0.1)};
  --color-menu: #{$surface0};
  --color-card: #{$surface0};
  --color-markup-table-row: #{color.change($text, $alpha: 0.02)};
  --color-markup-code-block: #{color.change($text, $alpha: 0.05)};
  --color-button: #{$surface0};
  --color-code-bg: #{$base};
  --color-code-sidebar-bg: #{$surface0};
  --color-shadow: #{color.change($lvl1, $alpha: 0.1)};
  --color-secondary-bg: #{$surface0};
  --color-text-focus: #{$text};
  --color-expand-button: #{$surface2};
  --color-placeholder-text: #{$surface2};
  --color-editor-line-highlight: var(--color-primary-light-5);
  --color-project-board-bg: var(--color-secondary-light-2);
  /* gitea source code: */
  /* should ideally be --color-text-dark, see go-gitea/gitea#15651 */
  --color-caret: var(--color-text);
  --color-reaction-bg: #{color.change($text, $alpha: 0.07)};
  --color-reaction-active-bg: var(--color-primary-alpha-40);
  --color-header-wrapper: #{$lvl2};
  --color-header-wrapper-transparent: #{color.change($lvl2, $alpha: 0)};
  --color-label-text: #{$crust};
  --color-label-bg: #{$accent};
  --color-label-hover-bg: #{ctx_lighten($accent, 6%)};
  --color-label-active-bg: #{ctx_lighten($accent, 3%)};
  --color-accent: var(--color-primary-light-1);
  --color-small-accent: var(--color-primary-light-5);
  --color-active-line: #{$surface1};
}

@if $isDark {
  /* invert emojis that are hard to read otherwise */
  .emoji[aria-label="check mark"],
  .emoji[aria-label="currency exchange"],
  .emoji[aria-label="TOP arrow"],
  .emoji[aria-label="END arrow"],
  .emoji[aria-label="ON! arrow"],
  .emoji[aria-label="SOON arrow"],
  .emoji[aria-label="heavy dollar sign"],
  .emoji[aria-label="copyright"],
  .emoji[aria-label="registered"],
  .emoji[aria-label="trade mark"],
  .emoji[aria-label="multiply"],
  .emoji[aria-label="plus"],
  .emoji[aria-label="minus"],
  .emoji[aria-label="divide"],
  .emoji[aria-label="curly loop"],
  .emoji[aria-label="double curly loop"],
  .emoji[aria-label="wavy dash"],
  .emoji[aria-label="paw prints"],
  .emoji[aria-label="musical note"],
  .emoji[aria-label="musical notes"] {
    filter: invert(100%) hue-rotate(180deg);
  }
}

.ui.ui.ui.button:not(.inverted, .basic),
.ui.ui.ui.label:not(.inverted, .basic) {
  &.primary,
  &.green,
  &.red,
  &.teal {
    color: $lvl1;
    &:hover {
      color: $lvl3;
    }
  }
}

.ui.basic.modal {
  background-color: $lvl3;
}

// link color for signed commits
.ui.commit-header-row .svg.gitea-lock ~ a {
  color: $lvl1;
}

// most recent commit hover when signed
.ui.sha.isSigned.isVerified {
  .shortsha {
    color: $lvl1;
  }
  svg.gitea-lock {
    fill: $lvl1;
  }
}

// modal text color for the "Remove GPG Key" modal
.ui.basic.modal,
.ui.basic.modal > .header,
.ui.inverted.button {
  color: $text !important;
}

::selection {
  background: color.change($rosewater, $alpha: 0.3) !important;
}

@import "chroma";
@import "codemirror";
@import "monaco";