/*
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
========================================
========================================
========================================
----------------------------------------
USWDS THEME CUSTOM STYLES
----------------------------------------
!! Copy this file to your project's
   sass root. Don't edit the version
   in node_modules.
----------------------------------------
Custom project SASS goes here.

i.e.
@include u-padding-right('05');
----------------------------------------
*/

@use "uswds-core" as *;

p,
h1,
h2,
h3,
h4,
h6,
h6 {
  margin: 0;
  padding: 0;
}

.link-heavy,
.link-light {
  @include u-text("ink", "no-underline");
  color: color("ink");
  display: inline-block;

  .is-home & {
    color: color("white");
    &:hover {
      color: color("primary-light");
    }
  }
}

.link-heavy {
  border-bottom: units("2px") solid color("primary-vivid");

  &:hover,
  &:active {
    color: color("primary-vivid");
  }
}

.link-light {
  border-bottom: units(2px) solid color("secondary-vivid");

  &:hover,
  &:active {
    color: color("secondary-vivid");
  }
}

.site-nav {
  margin-top: units(2);

  ul {
    @include add-list-reset;
    @include u-margin-x(-0.5);
  }

  li {
    display: inline-block;
    width: units(5);

    @include at-media("tablet") {
      width: auto;
    }
  }

  a {
    @include u-text("ink", "no-underline");
    @include u-margin-x(0.5);
    border-bottom: units(2px) solid color("transparent");
    display: inline-block;
    padding-top: units(1);

    &:hover,
    &:active {
      color: color("ink");
      border-bottom-color: color("ink");
    }

    .is-home & {
      color: color("white");

      &:hover,
      &:active {
        color: color("white");
        border-bottom-color: color("primary-vivid");
      }
    }
  }
}

.site-title {
  @include u-text("bold", "ink", "no-underline");

  a {
    @include u-text("bold", "ink", "no-underline");

    &:hover,
    &:active {
      color: color("primary-vivid");
    }
  }

  .is-home & {
    color: color("white");
  }
}

.huge {
  font-size: 35vw;
  letter-spacing: ls(-1);
  line-height: lh("sans", 1);
  overflow: hidden;
  padding: 0;

  @include at-media("tablet-lg") {
    font-size: 18rem;
  }
}

.ani-opacity {
  transition: opacity 0.75s;
}

._switchOnHoverShow,
._switchOnHoverHide {
  transition: opacity 0.75s 0.05s;
  display: block;
  opacity: 1;
}

._switchOnHover {
  position: relative;

  ._switchOnHoverShow {
    @include u-pin("all");
    opacity: 0;
    position: absolute;
  }

  &:hover {
    ._switchOnHoverShow {
      opacity: 1;
    }

    ._switchOnHoverHide {
      opacity: 0;
    }
  }
}

.token {
  @include u-font("mono", 1);
  @include u-padding-x(0.5);
  @include u-padding-y(0.5);
  @include u-text("ink", "no-underline");
  background-color: color("base-lightest");
  border-radius: units(2px);
  display: inline-block;

  &:hover,
  &:active {
    background-color: color("primary-vivid");
    color: color("white");
  }

  .site-section-dark & {
    background-color: color("base-darker");
    color: color("base-lighter");

    &:hover,
    &:active {
      background-color: color("primary-vivid");
      color: color("white");
    }
  }
}

.site-comparison {
  font-size: fs("sans", 12);
}

.site-font-system {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica,
    Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}

.site-font-verdana {
  font-family: Verdana, sans-serif;
}

.site-font-georgia {
  font-family: ff("serif");
}

h2 {
  font-weight: fw("light");
}
