@use "sass:map";
@use 'sass:list';


/** === Color Palette ==== */

/**
 * MITRE Engenuity color pallette.
 */
:root {
  --engenuity-black: #111921;
  --engenuity-white: #ffffff;
  --engenuity-light-default-text: #111921;
  --engenuity-light-h2-highlight: #005b94;
  --engenuity-dark-h2-highlight: #87DEFF;
  --engenuity-light-hyperlink: #005b94;
  --engenuity-dark-hyperlink: #88deff;
  --engenuity-mitre-blue: #005b94;
  --engenuity-blue: #0096d1;
  --engenuity-navy: #0D2F4F;
  --engenuity-dark-navy: #0B2338;
  --engenuity-dark-purple: #2b1972;
  --engenuity-core-color-8: #d4d4d3;
  --engenuity-core-color-9: #f1f3f4;
  --engenuity-field-border: #7e8284;
  --engenuity-topic-tag-background: #e0e0e0;
  --mitre-light-blue: #87DEFF;
  --mitre-black: #111921;
}


/** === Semantic Colors & Themes ==== */

/**
 * MITRE Engenuity themes.
 */
$themes: (
  light: (
    primary-font: var(--engenuity-light-default-text),
    primary-background: var(--engenuity-white),
    highlight: var(--engenuity-light-h2-highlight),
    hyperlink: var(--engenuity-mitre-blue),
    cta-hyperlink: var(--engenuity-mitre-blue),
    hyperlink-hover: var(--engenuity-navy),
    learn-more-arrow: url("../images/link_arrow_005b94.svg"),
    learn-more-arrow-cta: url("../images/link_arrow_005b94.svg"),
    learn-more-arrow-hover: url("../images/link_arrow_212c5e.svg"),
    accent-1-border: var(--engenuity-core-color-8),
    accent-2-border: var(--engenuity-core-color-9),
    field-border: var(--engenuity-field-border),
    icon: var(--engenuity-dark-navy),
    tag-font: var(--engenuity-black),
    tag-background: var(--engenuity-topic-tag-background)
  ),
  dark: (
    primary-font: var(--engenuity-white),
    primary-background: var(--engenuity-dark-navy),
    secondary-font: var(--engenuity-blue),
    highlight: var(--engenuity-dark-h2-highlight),
    hyperlink: var(--engenuity-white),
    cta-hyperlink: var(--engenuity-white),
    hyperlink-hover: var(--engenuity-dark-hyperlink),
    learn-more-arrow: url("../images/link_arrow_ffffff.svg"),
    learn-more-arrow-cta: url("../images/link_arrow_ffffff.svg"),
    learn-more-arrow-hover: url("../images/link_arrow_88deff.svg"),
    accent-1-border: var(--engenuity-navy),
    accent-2-border: var(--engenuity-navy),
    field-border: var(--engenuity-navy),
    icon: var(--engenuity-dark-navy),
    tag-font: var(--engenuity-black),
    tag-background: var(--engenuity-topic-tag-background)
  )
);

/**
 * Tests if the provided theme definition represents the "inherit" theme.
 * @param $theme
 *  The $theme definition.
 * @returns
 *  True if the theme is the "inherit" theme, false otherwise.
 */
@function is-inherit-theme($theme) {
  $inherit-theme-name: "inherit";
  @return list.nth($theme, 1) == $inherit-theme-name;
}

/**
 * Applies a theme's color variables to a container.
 * @param theme
 *  The name of the theme (from $themes).
 * @example
 *  .theme-light { @include apply-theme("light"); }
 *  .theme-dark  { @include apply-theme("dark"); }
 */
@mixin apply-theme($theme) {
  @each $variable, $value in map.get($themes, $theme) {
    --#{$variable}: #{$value};
  }
}

/**
 * Statically sets a container's theme.
 * @param theme
 *  The name of the theme (from $themes).
 * @param set-background
 *  If true, the container's background will be set according to the theme.
 *  (Default: true)
 * @example
 *  .theme-light { @include static-theme("light"); }
 *  .theme-light { @include static-theme("light", false); }
 */
@mixin static-theme($theme, $set-background: true) {
  @if(not is-inherit-theme($theme)) {
    @include apply-theme($theme);
    color: var(--primary-font);
  }
  @if $set-background {
    background: var(--primary-background);
  }
}

/**
 * Dynamically sets a container's theme based on the viewport's width.
 * @param default-theme
 *  The name of the theme (from $themes) that will act as the default theme.
 * @param dynamic-theme
 *  The size and name of each theme to apply dynamically.
 * @example
 *  Identical to `static-theme("light")`:
 *  .light-theme {
 *    @include dynamic-theme("light");
 *  }
 *
 *  [Viewport Width >= 800px] Uses "light" theme.
 *  [Viewport Width  < 800px] Uses "dark" theme.
 *  .light-to-dark-theme {
 *    @include static-theme("light", (800px, "dark"));
 *  }
 *
 *  Same as above except the container's background goes unset on both themes:
 *  .light-to-dark-theme {
 *    @include static-theme(("light", false), (800px, ("dark", false)));
 *  }
 *
 *  [Viewport Width >= 800px] Inherits parent container's theme (with no background)
 *  [Viewport Width  < 800px] Uses "light" theme.
 *  .inherit-to-light-theme {
 *    @include static-theme(("inherit", false), (800px, "light"));
 *  }
 */
@mixin dynamic-theme($default-theme, $dynamic-themes...) {
  @if list.length($dynamic-themes) == 0 {
    @include static-theme($default-theme...);
  }
  @else {
    // Declare default theme
    $next-theme: list.nth($dynamic-themes, 1);
    $next-size: list.nth($next-theme, 1);
    @media only screen and (
      min-width: #{ $next-size + 1 }
    ) {
      & {
        @include static-theme($default-theme...);
      }
    }
    // Declare dynamic themes
    @for $index from 1 through length($dynamic-themes) {
      $active-theme-size: list.nth($dynamic-themes, $index);
      $active-size: list.nth($active-theme-size, 1);
      $active-theme: list.nth($active-theme-size, 2);
      @if $index == length($dynamic-themes) {
        @media only screen and (
          max-width: #{ $active-size }
        ) {
          & {
            @include static-theme($active-theme...);
          }
        }
      }
      @else {
        $next-theme-size: list.nth($dynamic-themes, $index + 1);
        $next-size: list.nth($next-theme-size, 1);
        @media only screen and (
            max-width: #{ $active-size }
        ) and (
            min-width: #{ $next-size + 1 }
        )  {
          & {
            @include static-theme($active-theme...);
          }
        }
      }
    }
  }
}


/** === Basic Themes ==== */


body, .theme-light, .invert .theme-dark {
  @include static-theme("light");
}

body.invert, .theme-dark, .invert .theme-light {
  @include static-theme("dark");
}


/** === Typography ==== */


mark {
  color: var(--highlight);
  background: none;
}

a {
  color: var(--hyperlink);
  transition: .2s color;
}

a:hover {
  color: var(--hyperlink-hover);
}

.link-hover-trigger:hover > a {
  color: var(--hyperlink-hover);
}

code {
  background: var(--accent-2-border);
}

var {
  color: var(--tag-font);
  background: var(--tag-background);
}

blockquote {
  border-color: var(--primary-font);
  background: var(--tag-background);
}

.codeblock {
  background: var(--accent-2-border);
}

@mixin placeholder {
  color: var(--field-border)
}

@mixin learn-more {
  --learn-more-arrow: var(--learn-more-arrow-cta);
  & {
    color: var(--cta-hyperlink)
  }
}
.learn-more { @include learn-more }

@mixin box-link {

  & {
    color: var(--primary-background);
    background: var(--hyperlink);
    transition: .2s background;
  }

  &:hover {
    color: var(--primary-background);
    background: var(--hyperlink-hover);
  }

}


/** === Shadows ==== */


@mixin shadow {
  box-shadow:
    0px 2px 4px 0px rgba(15, 21, 56, 0.02),
    0px 5px 10px 0px rgba(15, 21, 56, 0.04),
    0px 12px 24px 0px rgba(15, 21, 56, 0.05),
    0px 40px 80px 0px rgba(15, 21, 56, 0.07);
}


/** === Borders ==== */


@mixin accent-border {
  border-color: var(--accent-2-border);
}

@mixin field-border {
  border-color: var(--field-border);
}


/** === Interface ==== */


button {
  color: var(--icon);
  background: var(--primary-background);
  border-color: currentColor;
}

button:hover {
  background: var(--accent-2-border);
}

input {
  @include field-border;
  outline: none;
}

@mixin icon {
  color: var(--icon);
}

@mixin dormant-list-item {
  color: var(--cta-hyperlink);
}

@mixin active-list-item {
  color: var(--hyperlink-hover);
  border-color: var(--highlight);
  background: var(--accent-2-border);
}
