@import "./fonts.css";
@import "./highlight.css";
@import "./icons.css";

/* Recolor */
:root {
  accent-color: var(--gray-9);
  --color-primary: var(--gray-9);
  --color-primary-contrast: var(--gray-1);
  --color-primary-hover: var(--gray-10);
  --color-primary-dark-1: var(--gray-10);
  --color-primary-dark-2: var(--gray-10);
  --color-primary-dark-3: var(--gray-11);
  --color-primary-dark-4: var(--gray-11);
  --color-primary-dark-5: var(--gray-12);
  --color-primary-dark-6: var(--gray-12);
  --color-primary-dark-7: var(--gray-12);
  --color-primary-light-1: var(--gray-8);
  --color-primary-light-2: var(--gray-8);
  --color-primary-light-3: var(--gray-7);
  --color-primary-light-4: var(--gray-7);
  --color-primary-light-5: var(--gray-6);
  --color-primary-light-6: var(--gray-6);
  --color-primary-light-7: var(--gray-6);
  --color-primary-alpha-10: var(--gray-a9);
  --color-primary-alpha-20: var(--gray-a9);
  --color-primary-alpha-30: var(--gray-a10);
  --color-primary-alpha-40: var(--gray-a10);
  --color-primary-alpha-50: var(--gray-a11);
  --color-primary-alpha-60: var(--gray-a11);
  --color-primary-alpha-70: var(--gray-a12);
  --color-primary-alpha-80: var(--gray-a12);
  --color-primary-alpha-90: var(--gray-a12);
  --color-secondary: var(--gray-9);
  --color-secondary-dark-1: var(--gray-9);
  --color-secondary-dark-2: var(--gray-9);
  --color-secondary-dark-3: var(--gray-9);
  --color-secondary-dark-4: var(--gray-10);
  --color-secondary-dark-5: var(--gray-10);
  --color-secondary-dark-6: var(--gray-10);
  --color-secondary-dark-7: var(--gray-11);
  --color-secondary-dark-8: var(--gray-11);
  --color-secondary-dark-9: var(--gray-11);
  --color-secondary-dark-10: var(--gray-12);
  --color-secondary-dark-11: var(--gray-12);
  --color-secondary-dark-12: var(--gray-12);
  --color-secondary-dark-13: var(--gray-12);
  --color-secondary-light-1: var(--gray-8);
  --color-secondary-light-2: var(--gray-7);
  --color-secondary-light-3: var(--gray-6);
  --color-secondary-light-4: var(--gray-5);
  --color-secondary-alpha-10: var(--gray-a2);
  --color-secondary-alpha-20: var(--gray-a2);
  --color-secondary-alpha-30: var(--gray-a3);
  --color-secondary-alpha-40: var(--gray-a3);
  --color-secondary-alpha-50: var(--gray-a4);
  --color-secondary-alpha-60: var(--gray-a4);
  --color-secondary-alpha-70: var(--gray-a5);
  --color-secondary-alpha-80: var(--gray-a5);
  --color-secondary-alpha-90: var(--gray-a5);

  /* colors */
  --color-red: var(--red-9);
  --color-orange: var(--orange-9);
  --color-yellow: var(--amber-9);
  --color-olive: var(--green-9);
  --color-green: var(--grass-9);
  --color-teal: var(--teal-9);
  --color-blue: var(--blue-9);
  --color-violet: var(--violet-9);
  --color-purple: var(--purple-9);
  --color-pink: var(--pink-9);
  --color-brown: var(--brown-9);
  --color-grey: var(--gray-9);
  --color-black: var(--slate-9);
  /* light variants - produced via Sass scale-color(color, $lightness: -10%) */
  --color-red-light: var(--red-10);
  --color-orange-light: var(--orange-10);
  --color-yellow-light: var(--amber-10);
  --color-olive-light: var(--green-10);
  --color-green-light: var(--grass-10);
  --color-teal-light: var(--teal-10);
  --color-blue-light: var(--blue-10);
  --color-violet-light: var(--violet-10);
  --color-purple-light: var(--purple-10);
  --color-pink-light: var(--pink-10);
  --color-brown-light: var(--brown);
  --color-grey-light: var(--gray-10);
  --color-black-light: var(--slate-10);
  /* dark 1 variants - produced via Sass scale-color(color, catppuccin.$lightness: -10%) */
  --color-red-dark-1: var(--red-10);
  --color-orange-dark-1: var(--orange-10);
  --color-yellow-dark-1: var(--amber-10);
  --color-olive-dark-1: var(--green-10);
  --color-green-dark-1: var(--grass-10);
  --color-teal-dark-1: var(--teal-10);
  --color-blue-dark-1: var(--blue-10);
  --color-violet-dark-1: var(--violet-10);
  --color-purple-dark-1: var(--purple-10);
  --color-pink-dark-1: var(--pink-10);
  --color-brown-dark-1: var(--brown-10);
  --color-black-dark-1: var(--slate-10);
  /* dark 2 variants - produced via Sass scale-color(color, catppuccin.$lightness: -20%) */
  --color-red-dark-2: var(--red-11);
  --color-orange-dark-2: var(--orange-11);
  --color-yellow-dark-2: var(--amber-11);
  --color-olive-dark-2: var(--green-11);
  --color-green-dark-2: var(--grass-11);
  --color-teal-dark-2: var(--teal-11);
  --color-blue-dark-2: var(--violet-11);
  --color-violet-dark-2: var(--violet-11);
  --color-purple-dark-2: var(--purple-11);
  --color-pink-dark-2: var(--pink-11);
  --color-brown-dark-2: var(--brown-11);
  --color-black-dark-2: var(--slate-11);
  /* other colors */
  --color-gold: #9e6c00; /* Radix Colors' Yellow 11 */
  --color-white: #fcfcfc; /* Radix Colors' Gray 1 */
  --color-diff-removed-word-bg: var(--red-11);
  --color-diff-added-word-bg: var(--grass-11);
  --color-diff-removed-row-bg: var(--red-3);
  --color-diff-moved-row-bg: var(--amber-3);
  --color-diff-added-row-bg: var(--grass-3);
  --color-diff-removed-row-border: var(--red-3);
  --color-diff-moved-row-border: var(--amber-3);
  --color-diff-added-row-border: var(--red-3);
  --color-diff-inactive: var(--teal-3);
  --color-error-border: var(--red-11);
  --color-error-bg: var(--red-2);
  --color-error-bg-active: var(--red-5);
  --color-error-bg-hover: var(--red-4);
  --color-error-text: var(--red-11);
  --color-success-border: var(--grass-11);
  --color-success-bg: var(--grass-2);
  --color-success-text: var(--grass-11);
  --color-warning-border: var(--amber-11);
  --color-warning-bg: var(--amber-2);
  --color-warning-text: var(--amber-11);
  --color-info-border: var(--blue-11);
  --color-info-bg: var(--blue-2);
  --color-info-text: var(--blue-11);
  --color-red-badge: var(--red-11);
  --color-red-badge-bg: var(--red-2);
  --color-red-badge-hover-bg: var(--red-4);
  --color-green-badge: var(--grass-11);
  --color-green-badge-bg: var(--grass-2);
  --color-green-badge-hover-bg: var(--grass-4);
  --color-yellow-badge: var(--amber-11);
  --color-yellow-badge-bg: var(--amber-2);
  --color-yellow-badge-hover-bg: var(--amber-4);
  --color-orange-badge: var(--orange-11);
  --color-orange-badge-bg: var(--orange-2);
  --color-orange-badge-hover-bg: var(--orange-4);
  --color-git: #ef5f00; /* Radix Colors' Orange 10 */
  --color-highlight-bg: var(--gray-a2);
  /* target-based colors */
  --color-body: var(--gray-1);
  --color-box-header: var(--gray-6);
  --color-box-body: var(--gray-2);
  --color-box-body-highlight: var(--gray-5);
  --color-text-dark: var(--gray-6);
  --color-text: var(--gray-11);
  --color-text-light: var(--gray-12);
  --color-text-light-1: var(--gray-12);
  --color-text-light-2: var(--gray-12);
  --color-text-light-3: var(--gray-12);
  --color-footer: var(--gray-2);
  --color-timeline: var(--gray-4);
  --color-input-text: var(--gray-11);
  --color-input-background: var(--gray-4);
  --color-input-toggle-background: var(--gray-4);
  --color-input-border: var(--gray-6);
  --color-input-border-hover: var(--gray-7);
  --color-nav-bg: var(--gray-2);
  --color-nav-hover-bg: var(--gray-4);
  --color-navbar: var(--gray-2);
  --color-navbar-transparent: var(--gray-a1);
  --color-light: var(--gray-4);
  --color-light-mimic-enabled: rgba(
    0,
    0,
    0,
    calc(40 / 255 * 222 / 255 / var(--opacity-disabled))
  );
  --color-light-border: var(--gray-6);
  --color-hover: var(--gray-a4);
  --color-active: var(--gray-a5);
  --color-menu: var(--gray-3);
  --color-card: var(--gray-3);
  --color-markup-table-row: var(--gray-a2);
  --color-markup-code-block: var(--gray-a4);
  --color-markup-code-inline: var(--gray-3);
  --color-button: var(--gray-3);
  --color-code-bg: var(--gray-2);
  --color-code-sidebar-bg: var(--gray-3);
  --color-shadow: var(--gray-a2);
  --color-tooltip-bg: var(--gray-3);
  --color-tooltip-text: var(--color-text);
  --color-secondary-bg: var(--gray-3);
  --color-text-focus: var(--gray-12);
  --color-expand-button: var(--gray-5);
  --color-placeholder-text: var(--gray-a6);
  --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: var(--gray-a4);
  --color-reaction-active-bg: var(--color-primary-alpha-40);
  --color-header-wrapper: var(--gray-4);
  --color-header-wrapper-transparent: var(--gray-4a);
  --color-label-text: var(--gray-1);
  --color-label-bg: var(--gray-9);
  --color-label-hover-bg: var(--gray-10);
  --color-label-active-bg: var(--gray-10);
  --color-accent: var(--color-primary-light-1);
  --color-small-accent: var(--color-primary-light-5);
  --color-active-line: var(--gray-12);
}

/* Blockquotes */
.markup blockquote {
  margin-right: 0;
  border-radius: var(--border-radius);
}

blockquote.attention-caution {
  border-left-color: var(--color-error-border);
  background-color: var(--color-error-bg);
}
svg.attention-caution,
strong.attention-caution {
  color: var(--color-error-text) !important;
}

blockquote.attention-important {
  border-left-color: var(--color-violet-dark-2);
  background-color: var(--violet-2);
}
svg.attention-important,
strong.attention-important {
  color: var(--color-violet-dark-2) !important;
}

blockquote.attention-note {
  border-left-color: var(--color-info-border);
  background-color: var(--color-info-bg);
}
svg.attention-note,
strong.attention-note {
  color: var(--color-info-text) !important;
}

blockquote.attention-tip {
  border-left-color: var(--color-success-border);
  background-color: var(--color-success-bg);
}
svg.attention-tip,
strong.attention-tip {
  color: var(--color-success-text) !important;
}

blockquote.attention-warning {
  border-left-color: var(--color-warning-border);
  background-color: var(--color-warning-bg);
}
svg.attention-warning,
strong.attention-warning {
  color: var(--color-warning-text) !important;
}

/* Remove various border of elements */
#navbar,
ul li {
  border-bottom: none !important;
}

/* Remove borders */
.secondary-nav {
  & > overflow-menu {
    border: none !important;
  }
  & > .divider {
    border-top: none;
  }
}

.page-footer,
.repo-home-sidebar-bottom .flex-list > :first-child,
#repo-files-table .repo-file-cell {
  border-top: none;
}

.tippy-box {
  border: none;
  padding: 1px;
}

.code-search,
.flex-list > .flex-item + .flex-item,
.grid-list > .grid-item,
.ui.attached.header,
.ui.attached.segment,
.ui.basic.label,
.ui.button.basic:not(.red),
.ui.button.small,
.ui.button.compact,
.ui.card,
.menu > .divider,
.ui.cards > .card,
.ui.dropdown .menu,
.ui.input > input,
.ui.menu,
.ui.segment,
.ui.segments,
.ui.segments > .segment,
.ui.selection.dropdown,
.ui.selection .menu,
.ui.selection .menu > .item,
#profile-avatar-card,
#repo-files-table,
#readme_profile,
/* Remove border on code-view lines */
.ui.table .code-diff table tbody tr,
.ui.table .code-view table tbody tr {
  border: none !important;
}
overflow-menu {
  border-bottom: none !important;
}

.ui.menu .item::before,
.ui.vertical.menu .item::before {
  background: var(--gray-6);
}

/* Borders on tables */
.ui.table,
.ui.table tbody tr,
.ui.table thead tr {
  border: 1px solid var(--gray-6);
  border-color: var(--gray-6);
  & td,
  & th {
    border: none;
    border-bottom: none;
  }
}

/* Borders recolors */
.markup h1,
.markup h2,
.markup h3,
.markup h4,
.markup h5,
.markup h6,
.menu {
  border-color: var(--gray-5) !important;
}
.markup hr {
  background-color: var(--gray-5);
}
.divider:not(.divider-text) {
  border-top-color: var(--gray-5);
}
.page-footer .right-links > a {
  border-left-color: var(--gray-5);
}
.tw-border-b-secondary {
  border-bottom-color: var(--gray-5) !important;
}

/* Custom labels (Requires our fork) */
.ui.label.scope-parent {
  .ui.label.scope-left {
    border: 1px var(--custom-color-label-bg, var(--color-label-bg)) solid !important;
  }
  .ui.label.scope-middle {
    background-color: transparent;
    color: var(--color-text) !important;
    border: 1px var(--custom-color-label-bg, var(--color-label-bg)) solid !important;
    border-radius: var(--border-radius);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .ui.label.scope-right {
    background-color: transparent !important;
    color: var(--custom-color-label-bg, var(--color-label-bg)) !important;
    border: 1px var(--custom-color-label-bg, var(--color-label-bg)) solid !important;
    border-left-width: 0 !important;
  }
}

/* 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.basic.modal,
.ui.basic.modal > .header,
.ui.inverted.button {
  color: #cdd6f4 !important;
}

#repo-topics,
#topic_edit > .ui.selection.dropdown {
  color: var(--color-label-text) !important;
}

.inline-code-block {
  color: #11111b;
}

::selection {
  background: var(--gray-a2) !important;
}

/* Heatmap recolor */
#user-heatmap svg rect {
  &[style*="var(--color-secondary-alpha-60)"] {
    fill: var(--grass-2) !important;
  }
  &[style*="var(--color-primary-light-4)"] {
    fill: var(--grass-4) !important;
  }
  &[style*="var(--color-primary-light-2)"] {
    fill: var(--grass-6) !important;
  }
  &[style*="var(--color-primary)"] {
    fill: var(--grass-8) !important;
  }
  &[style*="var(--color-primary-dark-2)"] {
    fill: var(--grass-10) !important;
  }
  &[style*="var(--color-primary-dark-4)"] {
    fill: var(--grass-12) !important;
  }
}