/* ------------------------------------ *\
   Light and Dark Mode System

   @todo: `.t-bolt-theme` classes are for backward compatibility and the `bolt-card-replacement` selectors are for the poorly built card component. They can be removed once we completely deprecate themes.
\* ------------------------------------ */

// Light and dark mode
@mixin bolt-base-light-mode {
  --m-bolt-neutral: var(--bolt-color-gray-dark);
  --m-bolt-text: var(--bolt-color-black);
  --m-bolt-bg: var(--bolt-color-white);
  --m-bolt-headline: var(--bolt-color-navy);
  --m-bolt-link: var(--bolt-color-navy-light);
  --m-bolt-primary: var(--bolt-color-navy-light);
  --m-bolt-text-on-primary: var(--bolt-color-white);
  --m-bolt-secondary: var(--bolt-color-white);
  --m-bolt-text-on-secondary: var(--bolt-color-navy);
  --m-bolt-tertiary: hsla(220.4, 80%, 15%, 0.15);
  --m-bolt-text-on-tertiary: var(--m-bolt-headline);
  --m-bolt-disabled: var(--bolt-color-gray-light);
  --m-bolt-text-on-disabled: var(--bolt-color-gray-xdark);
  --m-bolt-border: var(--m-bolt-tertiary);
  --m-bolt-table-header: var(--bolt-color-gray-xlight);
  --m-bolt-table-highlight: var(--bolt-color-gray-light);
  --m-bolt-table-border: var(--bolt-color-gray-light);
  --m-bolt-img-filter: none;
}

@mixin bolt-base-dark-mode {
  --m-bolt-neutral: var(--bolt-color-gray-light);
  --m-bolt-text: var(--bolt-color-white);
  --m-bolt-bg: var(--bolt-color-navy-xdark);
  --m-bolt-headline: var(--bolt-color-white);
  --m-bolt-link: var(--bolt-color-white);
  --m-bolt-primary: var(--bolt-color-yellow);
  --m-bolt-text-on-primary: var(--bolt-color-black);
  --m-bolt-secondary: var(--bolt-color-white);
  --m-bolt-text-on-secondary: var(--bolt-color-navy);
  --m-bolt-tertiary: hsla(0, 0%, 100%, 0.15);
  --m-bolt-text-on-tertiary: var(--m-bolt-headline);
  --m-bolt-disabled: var(--bolt-color-gray-dark);
  --m-bolt-text-on-disabled: var(--bolt-color-gray-light);
  --m-bolt-border: var(--m-bolt-tertiary);
  --m-bolt-table-header: var(--bolt-color-gray-xdark);
  --m-bolt-table-highlight: var(--bolt-color-gray-dark);
  --m-bolt-table-border: var(--bolt-color-gray-dark);
  --m-bolt-img-filter: grayscale(100%) invert(100%) brightness(150%);
}

:root,
// Legacy themes
.t-bolt-light,
.t-bolt-xlight,
// New themes
.t-bolt-white,
.t-bolt-gray-xlight,
.t-bolt-yellow {
  @include bolt-base-light-mode;
}

[data-bolt-mode='dark'],
// Legacy themes
.t-bolt-dark,
.t-bolt-xdark,
.t-bolt-xxdark,
// New themes
.t-bolt-black,
.t-bolt-navy-dark,
.t-bolt-navy,
.t-bolt-navy-light,
.t-bolt-teal,
.t-bolt-orange,
.t-bolt-pink,
.t-bolt-wine,
.t-bolt-berry,
.t-bolt-violet {
  @include bolt-base-dark-mode;
}

.t-bolt-light,
bolt-card-replacement[theme='light'] {
  --m-bolt-bg: var(--bolt-color-gray-xlight);
  --m-bolt-table-header: var(--bolt-color-white);
}

.t-bolt-dark,
bolt-card-replacement[theme='dark'] {
  --m-bolt-bg: var(--bolt-color-navy);
  --m-bolt-table-header: var(--bolt-color-navy-dark);
}

.t-bolt-xdark,
bolt-card-replacement[theme='xdark'] {
  --m-bolt-bg: var(--bolt-color-navy-dark);
  --m-bolt-table-header: var(--bolt-color-black);
}

.t-bolt-xxdark {
  --m-bolt-bg: black;
}

// New themes
.t-bolt-white {
  --m-bolt-bg: var(--bolt-color-white);
}

.t-bolt-gray-xlight {
  --m-bolt-bg: var(--bolt-color-gray-xlight);
  --m-bolt-table-header: var(--bolt-color-white);
}

.t-bolt-orange {
  --m-bolt-bg: var(--bolt-color-orange);
  --m-bolt-tertiary: hsla(220.4, 80%, 15%, 0.1);
  --m-bolt-table-header: var(--bolt-color-orange-dark);
  --m-bolt-table-border: var(--bolt-color-orange-light);
}

.t-bolt-yellow {
  --m-bolt-bg: var(--bolt-color-yellow);
  --m-bolt-link: var(--bolt-color-black);
  --m-bolt-primary: var(--bolt-color-navy-dark);
  --m-bolt-tertiary: hsla(220.4, 80%, 15%, 0.08);
  --m-bolt-table-header: var(--bolt-color-yellow-dark);
  --m-bolt-table-border: var(--bolt-color-yellow-light);
}

.t-bolt-pink {
  --m-bolt-bg: var(--bolt-color-pink);
  --m-bolt-tertiary: hsla(220.4, 80%, 15%, 0.12);
  --m-bolt-table-header: var(--bolt-color-wine);
  --m-bolt-table-border: var(--bolt-color-berry);
}

.t-bolt-black {
  --m-bolt-bg: var(--bolt-color-black);
}

.t-bolt-navy-dark {
  --m-bolt-bg: var(--bolt-color-navy-dark);
  --m-bolt-table-header: var(--bolt-color-black);
}

.t-bolt-navy {
  --m-bolt-bg: var(--bolt-color-navy);
  --m-bolt-table-header: var(--bolt-color-navy-dark);
}

.t-bolt-navy-light {
  --m-bolt-bg: var(--bolt-color-navy-light);
  --m-bolt-table-header: var(--bolt-color-navy);
  --m-bolt-table-border: var(--bolt-color-navy-xlight);
}

.t-bolt-teal {
  --m-bolt-bg: var(--bolt-color-teal);
  --m-bolt-tertiary: hsla(220.4, 80%, 15%, 0.1);
  --m-bolt-table-header: var(--bolt-color-teal-dark);
  --m-bolt-table-border: var(--bolt-color-teal-light);
}

.t-bolt-wine {
  --m-bolt-bg: var(--bolt-color-wine);
  --m-bolt-table-header: var(--bolt-color-berry);
  --m-bolt-table-border: var(--bolt-color-pink);
}

.t-bolt-berry {
  --m-bolt-bg: var(--bolt-color-berry);
  --m-bolt-table-header: var(--bolt-color-wine);
  --m-bolt-table-border: var(--bolt-color-pink);
}

.t-bolt-violet {
  --m-bolt-bg: var(--bolt-color-violet);
  --m-bolt-tertiary: hsla(220.4, 80%, 15%, 0.2);
  --m-bolt-table-border: var(--bolt-color-navy-xlight);
}

// Redefine light themes within dark mode
[data-bolt-mode='dark'] {
  // Legacy themes
  .t-bolt-xlight {
    @include bolt-base-dark-mode;
    --m-bolt-bg: black;
  }

  .t-bolt-light {
    @include bolt-base-dark-mode;
    --m-bolt-bg: var(--bolt-color-gray-xdark);
    --m-bolt-table-header: var(--bolt-color-black);
  }

  // New themes
  .t-bolt-white {
    @include bolt-base-dark-mode;
    --m-bolt-bg: black;
  }

  .t-bolt-gray-xlight {
    @include bolt-base-dark-mode;
    --m-bolt-bg: var(--bolt-color-gray-xdark);
    --m-bolt-table-header: var(--bolt-color-black);
  }

  .t-bolt-yellow {
    @include bolt-base-dark-mode;
    --m-bolt-bg: var(--bolt-color-gray-dark);
    --m-bolt-table-border: var(--bolt-color-gray);
  }
}

// Declare text color and bg color
// Dev note: add :root after bolt-theme() function usage is completely removed.
:root,
[data-bolt-mode],
[class^='t-bolt-'],
[class*=' t-bolt-'] {
  color: var(--m-bolt-text);
  background-color: var(--m-bolt-bg);
}