/*
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
========================================
========================================
========================================
----------------------------------------
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 *;
@use "colors";
@use "text-theme";

// @include u-font("sans", "md");
// '3xs'	13px
// '2xs'	14px
// 'xs'	15px
// 'sm'	16px
// 'md'	17px
// 'lg'	22px
// 'xl'	32px
// '2xl'	40px
// '3xl'	48px

// @include u-text('light')
// 100
// 200
// 300
// 400
// 500
// 600
// 700
// 800
// 900

// card        160px
// card-lg     240px
// mobile      320px
// mobile-lg   480px
// tablet      640px
// tablet-lg   880px
// desktop     1024px
// desktop-lg  1200px
// widescreen  1400px

h1,
h2,
h3,
h4,
h5 {
  font-family: text-theme.$header-font-family;
}

// Other Setup:
body {
  background: #fff;
  color: colors.$dark-gray;
  font-family: text-theme.$default-font-family;
  font-weight: text-theme.$default-font-weight;
  margin: 0;
}

a,
a:visited {
  color: colors.$dark-blue;
}

.hide {
  display: none;
}

.technical-difficulties {
  background: colors.$white;
  color: colors.$red;
  padding-top: units(2.5);
}

.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
}

.clearfix::after {
  clear: both;
}

ul li::after,
ul li::before {
  content: "";
  display: none;
  padding-right: 0;
}

/*
  404 Styles
*/

.container-padding {
  padding-left: units(2);
  padding-right: units(2);

  @include at-media("tablet") {
    padding-left: units(4);
    padding-right: units(4);
  }
}

.dark-background {
  background: colors.$dark-blue;

  &,
  a {
    color: colors.$white;
  }
}
