html {
  @extend .light-mode;
}

.light-mode {
  --color-icon: #6b7280;
  --color-text: hsl(221, 39%, 11%);
  --color-text-secondary: var(--color-icon);
  --color-text-inactive: hsl(215, 14%, 34%);
  --color-text-dark: #1a202c;
  --color-heading: #2c313d;
  --color-bg: hsl(220, 13%, 91%);
  --color-raised-bg: #ffffff;
  --color-divider: hsl(220, 13%, 91%);
  --color-divider-dark: #c8cdd3;

  --color-text-inverted: var(--color-bg);
  --color-bg-inverted: var(--color-text);

  --color-brand: #30b27b;
  --color-brand-hover: #1e9565;
  --color-brand-active: #177955;
  --color-brand-inverted: #ffffff;

  --tab-underline-hovered: #e2e8f0;

  --color-button-bg: #e0e0e5;
  --color-button-text: var(--color-text-dark);
  --color-button-bg-hover: #d9dce0;
  --color-button-text-hover: #1b1e24;
  --color-button-bg-active: #c3c6cb;
  --color-button-text-active: var(--color-button-text-hover);
  --color-button-bg-disabled: #cacdd2;
  --color-button-text-disabled: #9da3ac;
  --color-transparent-button-bg-hover: var(--color-button-bg);
  --color-transparent-button-text-hover: var(--color-text-dark);
  --color-transparent-button-bg-active: var(--color-button-bg-hover);
  --color-transparent-button-text-active: var(--color-text-dark);

  --color-dropdown-bg: var(--color-button-bg);
  --color-dropdown-text: var(--color-button-text);

  --color-category-bg: var(--color-bg);
  --color-category-text: var(--color-text-dark);

  --color-tooltip-bg: var(--color-text);
  --color-tooltip-text: var(--color-bg);

  --color-code-bg: var(--color-bg);
  --color-code-text: var(--color-text-dark);

  --color-ad: #d6e6f9;

  --shadow-dropdown: 3px 3px 14px hsla(0, 0%, 0%, 0.15);
  --shadow-dropdown-strong: 3px 3px 10px hsla(0, 0%, 0%, 0.3);
  --shadow-tooltip: 0.2rem 0.2rem 10px rgba(0, 0, 0, 0.15);

  --color-grey-link: var(--color-text);
  --color-grey-link-hover: var(--color-heading);
  --color-grey-link-active: var(--color-text-dark);
  --color-link: #2089ff;
  --color-link-hover: #1a76e7;
  --color-link-active: #146fd7;

  --color-badge-gray-text: #646161;
  --color-badge-gray-bg: #c8c1c1;
  --color-badge-red-text: #6e1931;
  --color-badge-red-bg: #db3162;
  --color-badge-green-text: #184e38;
  --color-badge-green-bg: #24a54e;
  --color-badge-yellow-text: #755920;
  --color-badge-yellow-bg: #f7bb43;

  --color-block-quote: var(--color-tooltip-bg);
  --color-header-underline: var(--color-tooltip-text);
  --color-hr: var(--color-text);

  --color-table-border: #dfe2e5;
  --color-table-alternate-row: #f6f8fa;

  --shadow-card: 0px 2px 4px 0px hsla(221, 39%, 11%, 0.1),
    inset 0px -2px 2px 0px hsla(221, 39%, 11%, 0.05);
  --shadow-image-md: 0px 2px 4px 0px hsla(221, 39%, 11%, 0.2),
    inset 0px -2px 2px 0px hsla(221, 39%, 11%, 0.1);
}

.dark-mode {
  --color-icon: #96a2b0;
  --color-text: #b0bac5;
  --color-text-inactive: #929aa3;
  --color-text-dark: #ecf9fb;
  --color-heading: #c4cfdd;
  --color-bg: #16181c;
  --color-raised-bg: #26292f;
  --color-divider: #474b54;
  --color-divider-dark: #646c75;

  --color-text-inverted: var(--color-bg);
  --color-bg-inverted: var(--color-text);

  --color-brand: #1bd96a;
  --color-brand-hover: #2de391;
  --color-brand-active: #55f5ae;
  --color-brand-inverted: #000;

  --tab-underline-hovered: #414146;

  --color-button-bg: #3e434b;
  --color-button-text: var(--color-text);
  --color-button-bg-hover: #494f58;
  --color-button-text-hover: #ffffff;
  --color-button-bg-active: #616570;
  --color-button-text-active: var(--color-button-text-hover);
  --color-button-bg-disabled: #3a434d;
  --color-button-text-disabled: #555d65;
  --color-transparent-button-bg-hover: var(--color-button-bg);
  --color-transparent-button-text-hover: var(--color-text-dark);
  --color-transparent-button-bg-active: var(--color-button-bg-hover);
  --color-transparent-button-text-active: var(--color-text-dark);

  --color-dropdown-bg: var(--color-button-bg);
  --color-dropdown-text: var(--color-button-text);

  --color-category-bg: var(--color-button-bg);
  --color-category-text: var(--color-text-dark);

  --color-tooltip-bg: var(--color-text);
  --color-tooltip-text: var(--color-bg);

  --color-code-bg: var(--color-button-bg);
  --color-code-text: var(--color-text-dark);

  --color-ad: #2c323a;

  --shadow-dropdown: 3px 3px 14px hsla(0, 0%, 0%, 0.15);
  --shadow-dropdown-strong: 3px 3px 20px hsla(0, 0%, 0%, 0.15);
  --shadow-tooltip: 0.2rem 0.2rem 10px rgba(0, 0, 0, 0.15);

  --color-link: #74b6f3;
  --color-link-hover: #92c0f5;
  --color-link-active: #b5d5fd;

  --color-badge-gray-bg: #646161;
  --color-badge-gray-text: #c8c1c1;
  --color-badge-red-text: #bd1a48;
  --color-badge-red-bg: #db3162;
  --color-badge-green-text: #1ebb7b;
  --color-badge-green-bg: #24a54e;
  --color-badge-yellow-text: #dba22d;
  --color-badge-yellow-bg: #f7bb43;

  --color-block-quote: var(--color-code-bg);
  --color-header-underline: var(--color-tooltip-text);
  --color-hr: var(--color-text);

  --color-table-border: #4f5864;
  --color-table-alternate-row: #262a30;
}

.oled-mode {
  @extend .dark-mode;
  --color-bg: #000000;
  --color-raised-bg: #101013;

  --color-button-bg: #222329;
  --color-button-bg-hover: #2d2d32;
  --color-button-bg-active: #3c3c40;
}

body {
  // Defaults
  background-color: var(--color-bg);
  color: var(--color-text);
  --font-standard: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen,
    Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  font-family: var(--font-standard);
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  margin: 0;
  padding: 0;

  // Rounding sizes
  --size-rounded-xs: 0.5rem;
  --size-rounded-sm: 0.75rem;
  --size-rounded-md: 1rem;
  --size-rounded-lg: 1.25rem;

  --size-rounded-max: 999999999px;
  --size-rounded-card: 1rem;
  --size-rounded-icon: 1rem;
  --size-rounded-control: 0.25rem;
  --size-rounded-tooltip: 0.25rem;

  --size-navbar-height: 3.5rem;
  --size-mobile-navbar-height: 4rem;

  --spacing-card-lg: 1.5rem;
  --spacing-card-bg: 1rem;
  --spacing-card-md: 0.75rem;
  --spacing-card-sm: 0.5rem;

  // Font Sizes
  --font-size-xxs: 0.625rem; //10px
  --font-size-xs: 0.75rem; //12px
  --font-size-sm: 0.875rem; //14px
  --font-size-nm: 1rem; //16px
  --font-size-md: 1.125rem; //18px
  --font-size-lg: 1.25rem; //20px
  --font-size-xl: 1.5rem; //24px
  --font-size-2xl: 2rem; //32px
  --font-size-3xl: 3rem; //48px

  // Font Weights
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --font-weight-text: var(--font-weight-medium);
  --font-weight-heading: var(--font-weight-extrabold);
  --font-weight-title: var(--font-weight-extrabold);
}

svg {
  height: 24px;
  width: 24px;
}

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

h2 {
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--color-text-dark);
}

h3 {
  margin-top: 0.5rem;
  margin-bottom: 0;
  color: var(--color-text-dark);
}

button {
  cursor: pointer;
  @extend .button;
}

input {
  border-radius: 2rem;
}

input,
textarea {
  background: var(--color-button-bg);
  color: var(--color-text);
  padding: 0.5rem 1rem;
  border: 2px solid transparent;

  &:hover:not([disabled]):not(:focus) {
    background: var(--color-button-bg-hover);
    color: var(--color-button-text-hover);
    border-color: var(--color-divider-dark);
  }

  &:focus {
    outline: none !important;
    border-color: var(--color-brand);
    color: var(--color-button-text-active);
  }

  &:disabled,
  &[disabled] {
    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed;
  }
}

.ea-content {
  background: var(--color-ad) !important;
  border-radius: var(--size-rounded-card) !important;
  margin: 0 !important;
  box-shadow: var(--shadow-faint) !important;
}

.ea-callout {
  margin: 0.25rem 0 !important;
  padding: 0 !important;
}

button {
  padding: 0.5rem 0;
  //outline: none; Bad for accessibility
  color: var(--color-button-text);
  background-color: var(--color-button-bg);
  border: none;
  border-radius: var(--size-rounded-control);

  &:focus-visible,
  &:hover {
    background-color: var(--color-button-bg-hover);
    color: var(--color-button-text-hover);
  }

  &:active {
    background-color: var(--color-button-bg-active);
    color: var(--color-button-text-active);
  }
}

// @import "vue-select/src/scss/vue-select.scss";

@import '~assets/styles/highlightjs.scss';
@import '~assets/styles/layout.scss';
@import '~assets/styles/utils.scss';
@import '~assets/styles/components.scss';
@import '~assets/styles/normalize.scss';