{"version":3,"sources":["../../node_modules/uswds/src/stylesheets/lib/grid/_box-sizing.scss","auth.css","../base/_accessibility.scss","../base/_utilities.scss","../../node_modules/uswds/src/stylesheets/lib/grid/_media.scss","auth.scss","../base/var/_colors.scss","../base/var/_spacing.scss"],"names":[],"mappings":"AAGE,KACE,6BAAsB,CAAtB,qBCFJ,CDKE,iBAII,0BAAmB,CAAnB,kBCLN,CCFA,wBCiDE,2BAA6B,CAC7B,qBAAuB,CACvB,kBAAoB,CACpB,mBAAqB,CACrB,mBAAqB,CACrB,oBAAsB,CACtB,yBAA2B,CAC3B,4BF3CF,CGqEI,qCClFJ,2CAOM,wBJiBJ,CACF,CIzBA,2EAaI,eJiBJ,CI9BA,qEAkBM,eJgBN,CGgDI,mCC5DF,qBAEI,iBJeJ,CACF,CIZG,+DAGG,gBJcN,CIVE,4BACE,qBCrBiB,CDsBjB,cJaJ,CGgCI,qCC/CF,4BAKI,eJeJ,CACF,CIZE,2BACE,eE1CmB,CF2CnB,gBJeJ,CI7DA,6CAkDI,iBEjDyB,CFkDzB,gBJeJ,CIZE,mBACE,4BJeJ,CGYI,qCC5BF,mBAII,YAAe,CACf,6BCrCoB,CDsCpB,iBJiBJ,CACF,CGII,mCC5BF,mBAUI,mBJmBJ,CACF,CIhBE,wBACE,aAAc,CACd,eJmBJ,CIhBE,8BACE,eJmBJ,CIfA,+BACE,UJkBF,CIfA,uBAEI,gBJiBJ,CIbA,oBACE,eJgBF,CGvBI,mCCUJ,oBAEI,eJgBF,CACF","file":"usajobs-design-system-auth.css","sourcesContent":["@charset \"UTF-8\";\n\n@if $border-box-sizing == true {\n  html { // http://bit.ly/1qk2tVR\n    box-sizing: border-box;\n  }\n\n  * {\n    &,\n    &::after,\n    &::before {\n      box-sizing: inherit;\n    }\n  }\n}\n","html {\n  box-sizing: border-box;\n}\n\n*, *::after, *::before {\n  box-sizing: inherit;\n}\n\n.usajobs-assistive-text {\n  position: absolute !important;\n  margin: -1px !important;\n  border: 0 !important;\n  padding: 0 !important;\n  width: 1px !important;\n  height: 1px !important;\n  overflow: hidden !important;\n  clip: rect(0 0 0 0) !important;\n}\n\n@media screen and (min-width: 37.5em) {\n  .usajobs-auth {\n    background-color: #f1f1f1;\n  }\n}\n\n@media screen and (min-width: 37.5em) {\n  .usajobs-auth .usajobs-shell {\n    background-color: #f1f1f1;\n  }\n}\n\n.usajobs-auth .usajobs-button_bar--slim,\n.usajobs-auth .usajobs-login-terms {\n  max-width: 60rem;\n}\n\n.usajobs-auth.create-account-success .usajobs-create-account-content {\n  min-height: 60vh;\n}\n\n@media screen and (min-width: 62em) {\n  .usajobs-auth__terms {\n    margin-top: 7.5rem;\n  }\n}\n\n.usajobs-auth__security-tips p,\n.usajobs-auth__security-tips li {\n  font-size: 1.4rem;\n}\n\n.usajobs-auth__content-well {\n  background-color: #ffffff;\n  padding: 1.5rem;\n}\n\n@media screen and (min-width: 37.5em) {\n  .usajobs-auth__content-well {\n    margin-top: 3rem;\n  }\n}\n\n.usajobs-auth__return-home {\n  margin-top: 3rem;\n  font-size: 1.4rem;\n}\n\n.usajobs-auth p.usajobs-auth__agree-to-terms {\n  margin-top: 1.5rem;\n  font-size: 1.4rem;\n}\n\n.usajobs-auth__piv {\n  border-top: 1px solid #aeb0b5;\n}\n\n@media screen and (min-width: 37.5em) {\n  .usajobs-auth__piv {\n    border-top: 0px;\n    border-left: 1px solid #aeb0b5;\n    padding-left: 3rem;\n  }\n}\n\n@media screen and (min-width: 62em) {\n  .usajobs-auth__piv {\n    padding-left: 4.5rem;\n  }\n}\n\n.usajobs-auth__piv-card {\n  display: block;\n  margin-top: 3rem;\n}\n\n.usajobs-auth__piv-first-time {\n  margin-top: 3rem;\n}\n\n.usajobs-login-terms-accordion {\n  width: 100%;\n}\n\n.usajobs-login-terms p {\n  font-size: 1.4rem;\n}\n\n.usajobs-auth--tall {\n  min-height: 80vh;\n}\n\n@media screen and (min-width: 62em) {\n  .usajobs-auth--wide {\n    min-width: 900px;\n  }\n}\n","// Accessibility\n\n@import \"utilities\";\n\n.usajobs-assistive-text {\n  @include hide();\n}\n","// USAJOBS Utilities\n\n// Typography helpers\n@mixin header {\n  font-family: $font-sans;\n  font-weight: $font-bold;\n  line-height: $heading-line-height;\n  margin-bottom: $size-base;\n  margin-top: $size-default;\n}\n\n@mixin h1 {\n  @include header();\n  font-size: $h1-font-size;\n  color: $color-primary-darkest;\n}\n\n@mixin h2 {\n  @include header();\n  font-size: $h2-font-size;\n  color: $color-primary-darkest;\n}\n\n@mixin h3 {\n  @include header();\n  font-size: $h3-font-size;\n}\n\n@mixin h4 {\n  @include header();\n  font-size: $h4-font-size;\n}\n\n@mixin h5 {\n  @include header();\n  font-size: $h5-font-size;\n}\n\n@mixin h6 {\n  @include header();\n  font-size: $h6-font-size;\n  font-weight: $font-normal;\n  text-transform: uppercase;\n}\n\n@mixin default-text {\n  font-size: $base-font-size;\n  font-weight: $font-normal;\n  line-height: 1.5;\n  margin: $size-S 0;\n}\n\n@mixin hide() {\n  position: absolute !important;\n  margin: -1px !important;\n  border: 0 !important;\n  padding: 0 !important;\n  width: 1px !important;\n  height: 1px !important;\n  overflow: hidden !important;\n  clip: rect(0 0 0 0) !important;\n}\n\n@mixin makeCircle(\n  $size,\n  $border: none,\n  $bg-color: inherit,\n  $color: $color-white\n) {\n  display: inline-block;\n  width: $size;\n  height: $size;\n  line-height: $size;\n  border-radius: 50%;\n  color: $color;\n  background-color: $bg-color;\n  box-shadow: 0 0 0 2px $border inset;\n}\n\n@mixin makeSemiCircle($size, $bg-color: inherit, $color: $color-white) {\n  display: inline-block;\n  width: $size;\n  height: $size / 2;\n  line-height: $size;\n  -moz-border-radius: $size $size 0 0;\n  -webkit-border-radius: $size $size 0 0;\n  border-radius: $size $size 0 0;\n  color: $color;\n  background-color: $bg-color;\n}\n\n@mixin makeCloseButton($size: 35px) {\n  position: absolute;\n  top: -#{$size-default};\n  right: -#{$size-default};\n  margin: 0;\n  padding: 0;\n  @include makeCircle($size);\n  background-color: $color-gray-light;\n  text-decoration: none;\n\n  &:after {\n    position: relative;\n    display: inline-block;\n    width: rem(12px);\n    height: rem(12px);\n    background-size: 12px 12px;\n    content: url(\"../img/icons/close/times.svg\");\n    color: $color-white;\n    // Safari puts the icon slightly too low, Chrome slightly too high\n    // line-height corrects the issue in Chrome but makes it way too low in Safari\n    // line-height: $size;\n  }\n\n  &:hover {\n    background-color: $color-gray-dark;\n  }\n}\n\n@mixin makeButton(\n  $bg-color,\n  $hover-color,\n  $active-color,\n  $big: false,\n  $color: $color-white\n) {\n  display: inline-block;\n  appearance: none;\n  background-color: $bg-color;\n  border: 0;\n  color: $color;\n  cursor: pointer;\n  font-family: $font-sans;\n  font-size: $base-font-size;\n  font-weight: $font-bold;\n  line-height: 1;\n  outline: none;\n  @include margin(0.5em 0.5em 0.5em null);\n  text-align: center;\n  text-decoration: none;\n  width: 100%;\n  -webkit-font-smoothing: antialiased;\n\n  .main-content & {\n    text-decoration: none;\n  }\n\n  @if ($big) {\n    padding: $size-default $size-M;\n    border-radius: 8px;\n    font-size: 2.4rem;\n  } @else {\n    padding: 1rem 2rem;\n    border-radius: $border-radius;\n  }\n\n  @include media($SM) {\n    width: auto;\n  }\n\n  &:visited {\n    color: $color;\n  }\n\n  &:hover,\n  &.usa-button-hover {\n    background-color: $hover-color;\n    color: $color;\n    border-bottom: 0;\n    text-decoration: none;\n  }\n\n  &:active,\n  &.usa-button-active {\n    background-color: $active-color;\n  }\n\n  &:focus {\n    box-shadow: $focus-shadow;\n  }\n}\n\n@mixin makePrimaryButton() {\n  @include makeButton(\n    $color-primary,\n    $color-primary-darker,\n    $color-primary-darkest,\n    \"big\"\n  );\n}\n\n@mixin bulletList() {\n  list-style: none;\n  padding-left: 0;\n  display: table;\n\n  > li {\n    display: table-row;\n\n    &:before {\n      content: \"•\";\n      display: table-cell;\n      padding-right: 0.4em;\n    }\n\n    &:after {\n      content: \"\";\n      display: block;\n      margin-bottom: 0.5em;\n    }\n  }\n}\n\n@mixin unstyledList() {\n  display: block;\n  margin: 0;\n  padding: 0;\n  list-style-type: none;\n\n  > li {\n    display: list-item;\n    margin: 0;\n\n    &:before {\n      display: none;\n    }\n\n    &:after {\n      display: none;\n    }\n  }\n}\n\n// BACKWARD COMPATIBLE SUPPORT FOR BOOTSTRAP\n// From https://gist.github.com/johnkoht/6405117\n// Converted from sass to scss\n// Create the grid for a given size\n// This will loop over the number of columns and create a css class\n// for each. If it's the last gride size, then let's not add a float\n@mixin grid-core($size) {\n  @for $i from 1 through $grid-columns {\n    .col-#{$size}-#{$i} {\n      // Ignore float for the largest grid size\n      @if $i < $grid-columns {\n        float: left;\n      }\n      @include span-columns($i);\n    }\n    // If it's not the screen-xs, then let's add push and pull helper classes\n    @if $size != \"xs\" {\n      .col-#{$size}-push-#{$i} {\n        left: flex-grid($i, $grid-columns) + flex-gutter($grid-columns);\n      }\n      .col-#{$size}-pull-#{$i} {\n        right: flex-grid($i, $grid-columns) + flex-gutter($grid-columns);\n      }\n    }\n  }\n}\n\n// OMEGA RESET\n// From http://www.ryanscherler.com/notes/entry/omega-reset-for-bourbon-neat/\n@mixin omega-reset($nth, $context: null) {\n  @if $context == null {\n    &:nth-child(#{$nth}) {\n      margin-right: flex-gutter();\n    }\n  } @else {\n    &:nth-child(#{$nth}) {\n      margin-right: flex-gutter($context);\n    }\n  }\n  &:nth-child(#{$nth} + 1) {\n    clear: none;\n  }\n}\n\n@mixin contentGutter() {\n  padding: 0 $size-default;\n\n  @include media($ML) {\n    padding-left: $size-M;\n    padding-right: $size-M;\n  }\n}\n\n// A variation on a mixin created to reproduce Google's Material Design Card shadows\n// https://gist.github.com/paulmelnikow/7fcfbe4f68e5df7fe326\n@mixin boxShadow($level, $inset: false) {\n  @if $level == 1 {\n    @if ($inset) {\n      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) inset,\n        0 1px 2px rgba(0, 0, 0, 0.24) inset;\n    } @else if {\n      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n    }\n  } @else if $level == 2 {\n    @if ($inset) {\n      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16) inset,\n        0 3px 6px rgba(0, 0, 0, 0.23) inset;\n    }\n    @elseif {\n      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);\n    }\n  } @else if $level == 3 {\n    @if ($inset) {\n      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19) inset,\n        0 6px 6px rgba(0, 0, 0, 0.23) inset;\n    }\n    @elseif {\n      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);\n    }\n  } @else if $level == 4 {\n    @if ($inset) {\n      box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25) inset,\n        0 10px 10px rgba(0, 0, 0, 0.22) inset;\n    }\n    @elseif {\n      box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),\n        0 10px 10px rgba(0, 0, 0, 0.22);\n    }\n  } @else if $level == 5 {\n    @if ($inset) {\n      box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3) inset,\n        0 15px 12px rgba(0, 0, 0, 0.22) inset;\n    }\n    @elseif {\n      box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3),\n        0 15px 12px rgba(0, 0, 0, 0.22);\n    }\n  }\n}\n\n@mixin permaLink() {\n  color: $color-primary;\n\n  &:visited {\n    color: $color-primary;\n  }\n}\n\n// Allows us to use an HTML button and not get the default styling\n@mixin removeButton() {\n  margin: 0;\n  background-color: inherit;\n  border-radius: inherit;\n  color: $color-base;\n  font-weight: normal;\n\n  &:hover {\n    color: $color-base;\n    background-color: inherit;\n  }\n}\n\n@mixin UHPIcons($size: 31px) {\n  @include makeCircle($size, none, $color-secondary);\n  display: inline-block;\n  padding-bottom: $size-default;\n  font-size: $base-font-size;\n  text-align: center;\n  margin-right: $size-base;\n\n  &.public,\n  &.interchange {\n    @include makeCircle($size, none, $color-primary-alt);\n  }\n\n  &.federal-employees,\n  &.internal,\n  &.ses {\n    @include makeCircle($size, none, $color-primary-darkest);\n  }\n\n  &.federal-employees .fa::before {\n    margin-top: rem(-3px);\n    margin-right: rem(-2px);\n  }\n\n  &.internal .fa {\n    padding-top: rem(5px);\n\n    &::before {\n      margin-left: rem(1px);\n    }\n  }\n\n  &.veterans,\n  &.military-spouses {\n    @include makeCircle($size, none, $color-green);\n  }\n\n  // New variation with stacked circle icons\n  &.military-spouses {\n    .fa.is-first {\n      text-indent: 0;\n      top: -2px;\n      left: -4px;\n      opacity: 0.8;\n    }\n    .fa.is-second {\n      text-indent: 0;\n      left: 3px;\n    }\n  }\n\n  &.students {\n    @include makeCircle($size, none, $color-gold);\n  }\n\n  &.disability,\n  &.individuals-with-disabilities {\n    @include makeCircle($size, none, $color-primary-darker);\n  }\n\n  &.peace-corps {\n    @include makeCircle($size, none, $color-visited);\n  }\n\n  &.former-overseas-employees,\n  &.family-of-overseas-employees {\n    @include makeCircle($size, none, $color-primary-alt-darkest);\n  }\n\n  &.native-americans {\n    @include makeCircle($size, none, $color-gray);\n  }\n\n  &.land-mgmt,\n  &.land-management {\n    @include makeCircle($size, none, $color-gray-warm-dark);\n  }\n}\n\n@mixin applicationStatusColors() {\n  background-color: $color-gray-dark;\n  color: $color-white;\n  border: 1px solid $color-gray-dark;\n\n  &.status-received,\n  &.status-referred,\n  &.status-selected {\n    background-color: $color-green-dark;\n    color: $color-white;\n    border-color: $color-green-dark;\n  }\n\n  // Paused\n  &.status-incomplete,\n  &.status-in-progress {\n    background-color: $color-gold;\n    color: $color-base;\n    border-color: $color-gold;\n  }\n\n  // Stopped\n  &.status-canceled,\n  &.status-not-referred,\n  &.status-not-selected {\n    background-color: $color-secondary;\n    color: $color-white;\n    border-color: $color-secondary;\n  }\n}\n\n// Mixin to replace the use of font awesome\n@mixin icon-content($file, $height, $width, $path: null) {\n  display: inline-block;\n  background-size: $height $width;\n  height: $height;\n  width: $width;\n  @if $path == null {\n    content: url(\"../img/icons/#{$file}.svg\");\n  } @else {\n    content: url($path);\n  }\n}\n\n@mixin iconCenter($size: 1em) {\n  display: inline-flex;\n  align-self: center;\n  position: relative;\n  height: $size;\n  width: $size;\n\n  svg {\n    position: absolute;\n    left: 0;\n    right: 0;\n    margin: 0 auto;\n    height: 1em;\n    width: 1em;\n  }\n}\n","@charset \"UTF-8\";\n\n/// Outputs a media-query block with an optional grid context (the total number of columns used in the grid).\n///\n/// @param {List} $query\n///   A list of media query features and values, where each `$feature` should have a corresponding `$value`.\n///   For a list of valid values for `$feature`, click [here](http://www.w3.org/TR/css3-mediaqueries/#media1).\n///\n///   If there is only a single `$value` in `$query`, `$default-feature` is going to be used.\n///\n///   The number of total columns in the grid can be set by passing `$columns` at the end of the list (overrides `$total-columns`).\n///\n///\n/// @param {Number (unitless)} $total-columns [$grid-columns]\n///   - Number of columns to use in the new grid context. Can be set as a shorthand in the first parameter.\n///\n/// @example scss - Usage\n///   .responsive-element {\n///      @include media(769px) {\n///        @include span-columns(6);\n///      }\n///   }\n///\n///  .new-context-element {\n///    @include media(min-width 320px max-width 480px, 6) {\n///      @include span-columns(6);\n///    }\n///  }\n///\n/// @example css - CSS Output\n///  @media screen and (min-width: 769px) {\n///    .responsive-element {\n///      display: block;\n///      float: left;\n///      margin-right: 2.35765%;\n///      width: 48.82117%;\n///    }\n///\n///    .responsive-element:last-child {\n///      margin-right: 0;\n///    }\n///  }\n///\n///  @media screen and (min-width: 320px) and (max-width: 480px) {\n///    .new-context-element {\n///      display: block;\n///      float: left;\n///      margin-right: 4.82916%;\n///      width: 100%;\n///    }\n///\n///    .new-context-element:last-child {\n///      margin-right: 0;\n///    }\n///  }\n\n@mixin media($query: $feature $value $columns, $total-columns: $grid-columns) {\n  @if length($query) == 1 {\n    @media screen and ($default-feature: nth($query, 1)) {\n      $default-grid-columns: $grid-columns;\n      $grid-columns: $total-columns !global;\n      @content;\n      $grid-columns: $default-grid-columns !global;\n    }\n  } @else {\n    $loop-to: length($query);\n    $media-query: \"screen and \";\n    $default-grid-columns: $grid-columns;\n    $grid-columns: $total-columns !global;\n\n    @if is-not(is-even(length($query))) {\n      $grid-columns: nth($query, $loop-to) !global;\n      $loop-to: $loop-to - 1;\n    }\n\n    $i: 1;\n    @while $i <= $loop-to {\n      $media-query: $media-query + \"(\" + nth($query, $i) + \": \" + nth($query, $i + 1) + \") \";\n\n      @if ($i + 1) != $loop-to {\n        $media-query: $media-query + \"and \";\n      }\n\n      $i: $i + 2;\n    }\n\n    @media #{$media-query} {\n      @content;\n      $grid-columns: $default-grid-columns !global;\n    }\n  }\n}\n","// Layouts: Authentication (Sign In, Create account, Account activation)\n\n@import \"../base-shared\";\n\n.usajobs-auth {\n  @include media($M) {\n    background-color: $color-gray-lightest;\n  }\n\n  .usajobs-shell {\n    @include media($M) {\n      background-color: $color-gray-lightest;\n    }\n  }\n\n  .usajobs-button_bar--slim,\n  .usajobs-login-terms {\n    max-width: $article-max-width;\n  }\n\n  &.create-account-success {\n    .usajobs-create-account-content {\n      min-height: 60vh;\n    }\n  }\n\n  &__terms {\n    @include media($L) {\n      margin-top: $size-XXL;\n    }\n  }\n\n  &__security-tips {\n    p,\n    li {\n      font-size: $small-font-size;\n    }\n  }\n\n  &__content-well {\n    background-color: $color-white;\n    padding: $size-default;\n\n    @include media($M) {\n      margin-top: $size-M;\n    }\n  }\n\n  &__return-home {\n    margin-top: $size-M;\n    font-size: $small-font-size;\n  }\n\n  p.usajobs-auth__agree-to-terms {\n    margin-top: $size-default;\n    font-size: $small-font-size;\n  }\n\n  &__piv {\n    border-top: 1px solid $color-gray-light;\n\n    @include media($M) {\n      border-top: 0px;\n      border-left: 1px solid $color-gray-light;\n      padding-left: $size-M;\n    }\n\n    @include media($L) {\n      padding-left: $size-L;\n    }\n  }\n\n  &__piv-card {\n    display: block;\n    margin-top: $size-M;\n  }\n\n  &__piv-first-time {\n    margin-top: $size-M;\n  }\n}\n\n.usajobs-login-terms-accordion {\n  width: 100%;\n}\n\n.usajobs-login-terms {\n  p {\n    font-size: $small-font-size;\n  }\n}\n\n.usajobs-auth--tall {\n  min-height: 80vh;\n}\n\n.usajobs-auth--wide {\n  @include media($L) {\n    min-width: 900px;\n  }\n}\n","// Colors\n\n// USWDS colors\n$color-primary: #0071bc;\n$color-primary-darker: #205493;\n$color-primary-darkest: #112e51;\n\n$color-primary-alt: #02bfe7;\n$color-primary-alt-dark: #00a6d2;\n$color-primary-alt-darkest: #046b99;\n$color-primary-alt-light: #9bdaf1; // lighten($color-primary-alt, 60%)\n$color-primary-alt-lightest: #e1f3f8; // lighten($color-primary-alt, 90%)\n\n$color-secondary: #e31c3d;\n$color-secondary-dark: #cd2026;\n$color-secondary-darkest: #981b1e;\n$color-secondary-light: #e59393; // lighten($color-secondary, 60%)\n$color-secondary-lightest: #f9dede; // lighten($color-secondary, 90%)\n\n$color-white: #ffffff;\n$color-base: #212121;\n$color-black: #000000;\n\n$color-gray-dark: #323a45;\n$color-gray: #5b616b; // lighten($color-gray-dark, 20%)\n$color-gray-medium: #757575; // lightest gray that passes color contrast\n$color-gray-light: #aeb0b5; // lighten($color-gray-dark, 60%)\n$color-gray-lighter: #d6d7d9; // lighten($color-gray-dark, 80%)\n$color-gray-lightest: #f1f1f1; // lighten($color-gray-dark, 91%)\n\n$color-gray-warm-dark: #494440;\n$color-gray-warm-light: #e4e2e0; // lighten($color-gray-warm-dark, 90%)\n$color-gray-cool-light: #dce4ef; // lighten($color-primary, 90%)\n\n$color-gold: #fdb81e;\n$color-gold-light: #f9c642; //  lighten($color-gold, 20%)\n$color-gold-lighter: #fad980; //  lighten($color-gold, 60%)\n$color-gold-lightest: #fff1d2; //  lighten($color-gold, 83%)\n\n$color-green: #2e8540;\n$color-green-light: #4aa564; // lighten($color-green, 20%)\n$color-green-lighter: #94bfa2; // lighten($color-green, 60%)\n$color-green-lightest: #e7f4e4; // lighten($color-green, 60%)\n\n$color-cool-blue: #205493;\n$color-cool-blue-light: #4773aa; // lighten($color-cool-blue, 20%)\n$color-cool-blue-lighter: #8ba6ca; // lighten($color-cool-blue, 60%)\n$color-cool-blue-lightest: #dce4ef; // lighten($color-cool-blue, 90%)\n\n$color-focus: #3e94cf;\n$color-visited: #4c2c92;\n\n$color-shadow: rgba(#000, 0.3);\n\n// USAJOBS specific\n$color-green-dark: #2d8700;\n$color-green-darker: darken($color-green-dark, 10%);\n\n// Only used for the active state of the alert/destructive button\n// See https://github.com/USAJOBS/design-system/issues/1\n$color-red-darkest: #7b0608;\n","// Spacing\n\n$size-XS: 0.25rem; // 2.5px\n$size-base: 0.5rem; // 5px\n$size-S: $size-base * 2; // 10px\n$size-default: $size-base * 3; // 15px\n$size-SM: $size-base * 4; // 20px - Use this sparingly\n$size-M: $size-base * 6; // 30px\n$size-L: $size-base * 9; // 45px\n$size-XL: $size-M * 2; // 60px\n$size-XXL: $size-default * 5; // 75px\n$size-XXXL: $size-default * 6; // 100px\n\n$space-inset-default: $size-default $size-default $size-default $size-default;\n$space-inset-XS: $size-XS $size-XS $size-XS $size-XS;\n$space-inset-base: $size-base $size-base $size-base $size-base;\n$space-inset-M: $size-M $size-M $size-M $size-M;\n$space-inset-L: $size-L $size-L $size-L $size-L;\n\n$space-stack-default: 0 0 $size-default 0;\n$space-stack-XS: 0 0 $size-XS 0;\n$space-stack-S: 0 0 $size-S 0;\n$space-stack-M: 0 0 $size-M 0;\n$space-stack-L: 0 0 $size-L 0;\n$space-stack-XL: 0 0 $size-XL 0;\n$space-stack-XXL: 0 0 $size-XXL 0;\n"]}