value+
discriminator+
in inherits the link color.\n.usa-prose code:not(.highlight code):not(a code) {\n background-color: #f0f0f0;\n padding: .125rem .25rem;\n word-wrap: break-word;\n color: #B9323F;\n}\n","@use \"sass:map\";\n@use \"sass:string\";\n@use \"sass:list\";\n\n@use \"../../functions\" as *;\n@use \"../../variables\" as *;\n@use \"../../tokens/font\" as *;\n@use \"../../settings\" as *;\n\n// Output the @font-face rule\n@mixin at-font-face($display-name, $file-path, $font-weight, $font-style) {\n // TODO: If $theme-use-rails-pipeline use font-url() statements\n // instead of url()\n // Dunno why I can't do this without an error...\n\n @font-face {\n font-family: $display-name;\n font-style: string.unquote($font-style);\n font-weight: $font-weight;\n font-display: fallback;\n src: font-sources($file-path);\n }\n}\n\n// Loop through weights, then call at-font-face\n@mixin generate-font-face(\n $font-style-src,\n $output-weights,\n $display-name,\n $dir,\n $font-style\n) {\n @each $font-weight, $filename in $font-style-src {\n @each $key, $output-weight in $output-weights {\n @if $output-weight == $font-weight and $filename {\n @include at-font-face(\n \"#{$display-name}\",\n // TODO: Why is this path causing problems?\n \"#{$theme-font-path}/#{$dir}/#{$filename}\",\n #{$font-weight},\n string.unquote(\"#{$font-style}\")\n );\n }\n }\n }\n}\n\n// Collect all font metadata, then call generate-font-face\n@mixin render-font-face($typeface-token, $src) {\n $generate: false;\n $this-src: ();\n $output-weights: $project-font-weights;\n @if $theme-generate-all-weights {\n $output-weights: (\n 100: 100,\n 200: 200,\n 300: 300,\n 400: 400,\n 500: 500,\n 600: 600,\n 700: 700,\n 800: 800,\n 900: 900,\n );\n }\n\n $typeface-metadata: map.get($all-typeface-tokens, $typeface-token);\n\n // If the typeface has src in its USWDS metadata, generate and\n // set $this-src\n @if map.get($typeface-metadata, src) {\n $generate: true;\n $this-src: map.get($typeface-metadata, src);\n }\n\n // If the typeface has custom src defined, generate and override\n // any existing USWDS src\n @if $src {\n $generate: true;\n $this-src: $src;\n }\n\n @if $generate {\n $display-name: map.get($typeface-metadata, display-name);\n $roman: map.get($this-src, roman);\n $italic: map.get($this-src, italic);\n $dir: map.get($this-src, dir);\n\n @if $roman {\n @include generate-font-face(\n $roman,\n $output-weights,\n $display-name,\n $dir,\n normal\n );\n }\n\n @if $italic {\n @include generate-font-face(\n $italic,\n $output-weights,\n $display-name,\n $dir,\n italic\n );\n }\n }\n}\n","@use \"uswds-core/src/styles/mixins/general/focus-outline\" as *;\n\n// Apply :focus behavior to focusable elements only (For IE 11)\ninput,\nselect,\ntextarea,\nbutton {\n &:not([disabled]) {\n &:focus {\n @include focus-outline;\n }\n }\n}\n\niframe,\n[href],\n[tabindex],\n[contentEditable=\"true\"] {\n &:focus {\n @include focus-outline;\n }\n}\n","@use \"../../functions\" as *;\n@use \"../../settings\" as *;\n\n// Focus state mixin\n@mixin focus-outline(\n $width: $theme-focus-width,\n $style: $theme-focus-style,\n $color: $theme-focus-color,\n $offset: $theme-focus-offset\n) {\n $width: if($width == null, $theme-focus-width, $width);\n $style: if($style == null, $theme-focus-style, $style);\n $color: if($color == null, $theme-focus-color, $color);\n $offset: if($offset == null, $theme-focus-offset, $offset);\n outline: units($width) $style color($color);\n outline-offset: units($offset);\n}\n","@use \"uswds-core/src/styles/mixins/general/media-link\" as *;\n\nimg {\n max-width: 100%;\n}\n\n.usa-media-link {\n @include media-link;\n}\n","// TODO: Add documentation instructions for using this class on image links\n@mixin media-link {\n display: inline-block;\n line-height: 0;\n}\n","@use \"uswds-core/src/styles/mixins/general/focus-outline\" as *;\n\n.usa-focus {\n @include focus-outline;\n}\n","@use \"uswds-core/src/styles/mixins/general/screen-reader\" as *;\n\n.usa-sr-only {\n @include sr-only;\n}\n","// Screen reader only helper\n@mixin sr-only {\n position: absolute;\n left: -999em;\n right: auto;\n}\n\n@mixin add-sr-only {\n @include sr-only;\n}\n\n// This \"negates\" the sr-only helper; useful if\n// we want the default state of something to be\n// for screen readers only, but we want to force\n// it to show for sighted users under more specific\n// conditions.\n@mixin not-sr-only {\n position: static;\n}\n\n@mixin add-no-sr-only {\n position: static;\n}\n","@use \"uswds-core\" as *;\n\n.usa-content {\n p,\n ul:not(.usa-accordion):not(.usa-accordion--bordered),\n ol:not(.usa-accordion):not(.usa-accordion--bordered) {\n max-width: measure($theme-text-measure);\n }\n}\n","@use \"uswds-core\" as *;\n\n$background-context: \"Background\";\n\n.usa-dark-background {\n background-color: color(\"base-darker\");\n\n p,\n span {\n color: color($theme-text-reverse-color);\n }\n\n a {\n @include set-link-from-bg(\n \"base-darker\",\n $theme-link-reverse-color,\n $context: $background-context\n );\n }\n}\n","@use \"sass:math\";\n@use \"sass:list\";\n\n@use \"../../settings\" as *;\n@use \"../../functions/general\" as *;\n@use \"../../functions/color/\" as *;\n@use \"../../functions/utilities/color\" as *;\n\n@mixin set-link-from-bg(\n $bg-color: \"default\",\n $preferred-link-color: \"default\",\n $fallback-link-color: \"default\",\n $wcag-target: \"AA\",\n $important: null,\n $context: false\n) {\n $important: if($important, \" !important\", null);\n $link-tokens: get-link-tokens-from-bg(\n $bg-color,\n $preferred-link-color,\n $fallback-link-color,\n $wcag-target,\n $context\n );\n\n $bg-color: if($bg-color == \"default\", get-default(\"bg-color\"), $bg-color);\n $link-token: list.nth($link-tokens, 1);\n $hover-token: list.nth($link-tokens, 2);\n\n $visited-token: if(\n is-accessible-magic-number(\n $theme-link-visited-color,\n $bg-color,\n $wcag-target\n ),\n $theme-link-visited-color,\n $link-token\n );\n color: color($link-token) #{$important};\n &:visited {\n color: color($visited-token) #{$important};\n }\n &:hover,\n &:active {\n color: color($hover-token) #{$important};\n }\n}\n","@use \"uswds-core\" as *;\n\n.usa-display {\n @include typeset-h3;\n margin-bottom: 0;\n\n @include at-media(\"mobile-lg\") {\n @include typeset-h1;\n }\n\n @include at-media(\"tablet\") {\n @include typeset-display;\n }\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n// Adds margin either l/r(x) or t/b(y)\n\n@mixin margin-n($side, $value...) {\n $value: unpack($value);\n @if $side == all {\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n margin: get-uswds-value(margin, $value...) #{$important};\n } @else if $side == x {\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n margin-left: get-uswds-value(\"margin-horizontal\", $value...) #{$important};\n margin-right: get-uswds-value(\"margin-horizontal\", $value...) #{$important};\n } @else if $side == y {\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n margin-bottom: get-uswds-value(\"margin-vertical\", $value...) #{$important};\n margin-top: get-uswds-value(\"margin-vertical\", $value...) #{$important};\n } @else if $side == t {\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n margin-top: get-uswds-value(\"margin-vertical\", $value...) #{$important};\n } @else if $side == r {\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n margin-right: get-uswds-value(\"margin-horizontal\", $value...) #{$important};\n } @else if $side == b {\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n margin-bottom: get-uswds-value(\"margin-vertical\", $value...) #{$important};\n } @else if $side == l {\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n margin-left: get-uswds-value(\"margin-horizontal\", $value...) #{$important};\n }\n}\n\n@mixin u-margin($value...) {\n @include margin-n(all, $value...);\n}\n\n@mixin u-margin-x($value...) {\n @include margin-n(x, $value...);\n}\n\n@mixin u-margin-y($value...) {\n @include margin-n(y, $value...);\n}\n\n@mixin u-margin-top($value...) {\n @include margin-n(t, $value...);\n}\n\n@mixin u-margin-right($value...) {\n @include margin-n(r, $value...);\n}\n\n@mixin u-margin-bottom($value...) {\n @include margin-n(b, $value...);\n}\n\n@mixin u-margin-left($value...) {\n @include margin-n(l, $value...);\n}\n","@use \"sass:meta\";\n@use \"sass:list\";\n@use \"../general/focus-outline\" as *;\n@use \"../../functions\" as *;\n@use \"../../mixins/utilities\" as *;\n@use \"../../mixins/general/focus-outline\" as *;\n@use \"../../settings\" as *;\n\n/*\n----------------------------------------\ntypeset()\n----------------------------------------\nSets:\n- family\n- size\n- line-height\n----------------------------------------\n*/\n\n@mixin typeset(\n $family: $theme-body-font-family,\n $scale: $theme-body-font-size,\n $line-height: $theme-body-line-height\n) {\n @if meta.type-of($family) == \"list\" {\n $list: $family;\n $family: if(list.nth($list, 1), list.nth($list, 1), null);\n $scale: if(list.nth($list, 2), list.nth($list, 2), null);\n $line-height: if(list.nth($list, 3), list.nth($list, 3), null);\n }\n $family: if($family == null, $theme-body-font-family, $family);\n $scale: if($scale == null, $theme-body-font-size, $scale);\n $line-height: if($line-height == null, $theme-body-line-height, $line-height);\n @include u-font($family, $scale);\n @include u-line-height($family, $line-height);\n}\n\n@mixin typeset-heading-base {\n @include u-margin-y(0);\n clear: both;\n}\n\n@mixin typeset-heading {\n @include typeset-heading-base;\n\n * + & {\n margin-top: $theme-heading-margin-top;\n }\n\n + * {\n margin-top: $theme-paragraph-margin-top;\n }\n}\n\n@mixin typeset-p-base {\n line-height: line-height($theme-body-font-family, $theme-body-line-height);\n max-width: measure($theme-text-measure);\n}\n\n// typeset element mixins\n@mixin typeset-p {\n @include typeset-p-base;\n @include u-margin-y(0);\n\n * + & {\n margin-top: $theme-paragraph-margin-top;\n }\n\n + * {\n margin-top: $theme-paragraph-margin-top;\n }\n}\n\n@mixin typeset-link {\n color: color($theme-link-color);\n text-decoration: underline;\n\n &:visited {\n color: color($theme-link-visited-color);\n }\n\n &:hover {\n color: color($theme-link-hover-color);\n }\n\n &:active {\n color: color($theme-link-active-color);\n }\n\n &:focus {\n @include focus-outline;\n }\n}\n","@use \"../../settings\" as *;\n@use \"../../functions\" as *;\n@use \"../../mixins/utilities\" as *;\n@use \"./typeset\" as *;\n\n@mixin display {\n @include typeset(\n \"heading\",\n $theme-display-font-size,\n $theme-heading-line-height\n );\n\n font-weight: fw(\"bold\");\n}\n\n@mixin h1 {\n @include typeset(\"heading\", $theme-h1-font-size, $theme-heading-line-height);\n font-weight: fw(\"bold\");\n}\n\n@mixin h2 {\n @include typeset(\"heading\", $theme-h2-font-size, $theme-heading-line-height);\n font-weight: fw(\"bold\");\n}\n\n@mixin h3 {\n @include typeset(\"heading\", $theme-h3-font-size, $theme-heading-line-height);\n font-weight: fw(\"bold\");\n}\n\n@mixin h4 {\n @include typeset(\"heading\", $theme-h4-font-size, $theme-heading-line-height);\n font-weight: fw(\"bold\");\n}\n@mixin h5 {\n @include typeset(\"heading\", $theme-h5-font-size, $theme-heading-line-height);\n font-weight: fw(\"bold\");\n}\n\n@mixin h6 {\n @include typeset(\"body\", $theme-h6-font-size, $theme-heading-line-height);\n font-weight: fw(\"normal\");\n letter-spacing: ls(\"ls-1\");\n text-transform: uppercase;\n}\n\n@mixin typeset-display {\n @include typeset-heading;\n @include display;\n}\n\n@mixin typeset-h1 {\n @include typeset-heading;\n @include h1;\n}\n\n@mixin typeset-h2 {\n @include typeset-heading;\n @include h2;\n}\n\n@mixin typeset-h3 {\n @include typeset-heading;\n @include h3;\n}\n\n@mixin typeset-h4 {\n @include typeset-heading;\n @include h4;\n}\n\n@mixin typeset-h5 {\n @include typeset-heading;\n @include h5;\n}\n\n@mixin typeset-h6 {\n @include typeset-heading;\n @include h6;\n}\n","@use \"sass:map\";\n@use \"../../functions\" as *;\n@use \"../../properties\" as *;\n@use \"../../settings\" as *;\n\n// Mobile-first media query helper\n\n$our-breakpoints: map-deep-get($system-properties, breakpoints, standard);\n$custom-breakpoints: map-deep-get($system-properties, breakpoints, extended);\n\n@mixin at-media($bp) {\n $quoted-bp: smart-quote($bp);\n @if $quoted-bp == \"none\" {\n @content;\n } @else if map.has-key($our-breakpoints, $quoted-bp) {\n @if $theme-respect-user-font-size {\n $bp: rem-to-user-em(map.get($our-breakpoints, $quoted-bp));\n } @else {\n $bp: rem-to-px(map.get($our-breakpoints, $quoted-bp));\n }\n @media all and (min-width: #{$bp}) {\n @content;\n }\n } @else if map.has-key($custom-breakpoints, $quoted-bp) {\n @if unit(map.get($custom-breakpoints, $quoted-bp)) == \"px\" {\n @if $theme-respect-user-font-size {\n $bp: px-to-user-em(map.get($custom-breakpoints, $quoted-bp));\n } @else {\n $bp: map.get($custom-breakpoints, $quoted-bp);\n }\n @media all and (min-width: #{$bp}) {\n @content;\n }\n } @else {\n @warn 'Custom breakpoint `#{$quoted-bp}` was defined with the unit #{unit(map.get($custom-breakpoints, $quoted-bp))} and can not be generated. Values for `$theme-utility-breakpoints-custom` must be set with `px` units.';\n }\n } @else {\n @warn '`#{$bp}` is not a valid USWDS project breakpoint. Valid values: #{map.keys($our-breakpoints)}';\n }\n}\n\n// Max-width media query\n@mixin at-media-max($bp) {\n $quoted-bp: smart-quote($bp);\n @if map-has-key($our-breakpoints, $quoted-bp) {\n @if $theme-respect-user-font-size {\n $bp: rem-to-user-em(map.get($our-breakpoints, $quoted-bp)) - 0.01em;\n } @else {\n $bp: rem-to-px(map.get($our-breakpoints, $quoted-bp)) - 1px;\n }\n @media all and (max-width: #{$bp}) {\n @content;\n }\n } @else if map.has-key($custom-breakpoints, $quoted-bp) {\n @if unit(map.get($custom-breakpoints, $quoted-bp)) == \"px\" {\n @if $theme-respect-user-font-size {\n $bp: px-to-user-em(map.get($custom-breakpoints, $quoted-bp)) - 0.01em;\n } @else {\n $bp: map.get($custom-breakpoints, $quoted-bp) - 1px;\n }\n @media all and (max-width: #{$bp}) {\n @content;\n }\n } @else {\n @warn 'Custom breakpoint `#{$quoted-bp}` has the unit #{unit(map.get($custom-breakpoints, $quoted-bp))} and can not be generated. Custom breakpoints must be set in px.';\n }\n } @else {\n @warn '`#{$bp}` is not a valid USWDS project breakpoint. Valid values: #{map-keys($our-breakpoints)}';\n }\n}\n","@use \"uswds-core\" as *;\n\n.usa-intro {\n @include typeset(\n $theme-lead-font-family,\n $theme-lead-font-size,\n $theme-lead-line-height\n );\n font-weight: $theme-font-weight-normal;\n max-width: measure($theme-lead-measure);\n}\n","@use \"uswds-core\" as *;\n\n$tokens-icon-sizes: (\n \"3\": 3,\n \"4\": 4,\n \"5\": 5,\n \"6\": 6,\n \"7\": 7,\n \"8\": 8,\n \"9\": 9,\n);\n\n$icon-inline-size-magic-number: 1em;\n\n.usa-icon {\n display: inline-block;\n fill: currentColor;\n height: $icon-inline-size-magic-number;\n position: relative;\n width: $icon-inline-size-magic-number;\n}\n\n@each $token, $units in $tokens-icon-sizes {\n .usa-icon--size-#{$units} {\n @include u-square($units);\n }\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n// Outputs height\n\n@mixin u-height($value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n height: get-uswds-value(\"height\", $value...) #{$important};\n}\n","@use \"uswds-core\" as *;\n\n.usa-link {\n @include typeset-link;\n}\n\n// External link consider 'effortless style approach':\n// [href^='http:']:not([href*='my-domain.com'])\n// [href^='https:']:not([href*='my-domain.com'])\n\n.usa-link--external {\n @include external-link();\n\n &.usa-link--alt {\n @include external-link($contrast-bg: \"base-darker\");\n }\n}\n","@use \"../../settings\" as *;\n@use \"./icon\" as *;\n@use \"../../functions\" as *;\n@use \"./screen-reader\" as *;\n\n$external-link-size: 1.75ex;\n\n$icon-object: (\n \"name\": \"launch\",\n \"color\": currentColor,\n \"height\": $external-link-size,\n \"svg-height\": 24,\n \"svg-width\": 24,\n \"position-x\": center,\n \"position-y\": center,\n);\n\n@mixin external-link($contrast-bg: \"default\") {\n display: inline;\n\n // Screen reader label\n &::before {\n @include sr-only;\n content: $theme-external-link-sr-label-tab-same;\n }\n\n &[target=\"_blank\"]::before {\n @include sr-only;\n content: $theme-external-link-sr-label-tab-new;\n }\n\n &::after {\n @include add-color-icon($icon-object, $contrast-bg);\n content: \"\";\n display: inline;\n margin-top: 0.7ex;\n margin-left: 2px;\n padding-left: 1.75ex;\n vertical-align: middle;\n }\n}\n","@use \"sass:map\";\n@use \"sass:math\";\n\n@use \"../../settings\" as *;\n@use \"../../functions\" as *;\n@use \"../../variables\" as *;\n@use \"./add-background-svg\" as *;\n\n@mixin display-icon($icon, $direction, $size, $margin, $hover) {\n &::#{$direction} {\n @include add-background-svg(\"#{$icon}\");\n background-size: 100%;\n content: \"\";\n display: inline-block;\n height: $size;\n width: $size;\n\n /* stylelint-disable block-closing-brace-newline-after, at-rule-empty-line-before */\n @if $direction == \"after\" {\n margin-left: $margin;\n } @else {\n margin-right: $margin;\n }\n /* stylelint-enable */\n }\n\n @if $hover == \"hover\" {\n &:hover::#{$direction} {\n @include add-background-svg(\"#{$icon}-hover\");\n }\n }\n}\n\n@mixin remove-icon($direction) {\n &::#{$direction} {\n display: none;\n }\n}\n\n@mixin add-icon(\n $icon-name,\n $direction,\n $image-size,\n $container-size,\n $margin,\n $hover\n) {\n &::#{$direction} {\n @include add-background-svg(\"#{$icon-name}\");\n background-position: center center;\n background-repeat: no-repeat;\n background-size: units($image-size);\n content: \"\";\n display: inline-block;\n height: units($container-size);\n width: units($container-size);\n\n /* stylelint-disable block-closing-brace-newline-after, at-rule-empty-line-before */\n @if $direction == \"after\" {\n margin-left: units($margin);\n } @else {\n margin-right: units($margin);\n }\n /* stylelint-enable */\n }\n\n @if $hover == \"hover\" {\n &:hover::#{$direction} {\n @include add-background-svg(\"#{$icon-name}-hover\");\n }\n }\n}\n\n// New icon mixins using SVG mask technique\n//\n// $image may be a specific SVG or a list in the form\n// ($base, $variant, $variant-alt, $bg)\n// the mixin will pick IE11-compatible svgs named\n// [base]-[variant].svg based on the specified background-color\n//\n// @param {Map} - $icon-object - name, svg-height, svg-width, height, container-height, container-width, color, color-variant, color-hover, rotate, path, position-x, position-y\n// @param {String} - $contrast-bg - Color token\n@mixin add-color-icon($icon-object, $contrast-bg: \"default\") {\n $filename-base: map.get($icon-object, \"name\");\n $svg-height: map.get($icon-object, \"svg-height\");\n $svg-width: map.get($icon-object, \"svg-width\");\n $aspect: math.div($svg-width, $svg-height);\n $height: if(\n math.is-unitless(map.get($icon-object, \"height\")),\n units(map.get($icon-object, \"height\")),\n map.get($icon-object, \"height\")\n );\n $width: $height * $aspect;\n $container-height: if(\n map.has-key($icon-object, \"container-height\"),\n units(map.get($icon-object, \"container-height\")),\n null\n );\n $container-width: if(\n map.has-key($icon-object, \"container-width\"),\n units(map.get($icon-object, \"container-width\")),\n null\n );\n $color: if(\n map.has-key($icon-object, \"color\"),\n map.get($icon-object, \"color\"),\n \"ink\"\n );\n $color-variant: if(\n map.has-key($icon-object, \"color-variant\"),\n map.get($icon-object, \"color-variant\"),\n \"white\"\n );\n $color-hover: if(\n map.has-key($icon-object, \"color-hover\"),\n map.get($icon-object, \"color-hover\"),\n null\n );\n $rotate: if(\n map.has-key($icon-object, \"rotate\"),\n map.get($icon-object, \"rotate\"),\n null\n );\n $path: if(\n map.has-key($icon-object, \"path\"),\n map.get($icon-object, \"path\"),\n $theme-image-path\n );\n $position-y: if(\n map.has-key($icon-object, \"position-y\"),\n map.get($icon-object, \"position-y\"),\n center\n );\n $position-x: if(\n map.has-key($icon-object, \"position-x\"),\n map.get($icon-object, \"position-x\"),\n center\n );\n $ie11-variant: get-color-token-from-bg($contrast-bg, \"white\", \"black\");\n $filename-ie11: if(\n $ie11-variant == \"white\",\n \"usa-icons-bg/#{$filename-base}--white.svg\",\n \"usa-icons/#{$filename-base}.svg\"\n );\n\n background-image: url(\"#{$path}/#{$filename-ie11}\");\n background-repeat: no-repeat;\n background-position: $position-x $position-y;\n background-size: $width $height;\n display: inline-block;\n height: if($container-height, $container-height, $height);\n width: if($container-width, $container-width, $width);\n @if $rotate {\n transform: rotate($rotate);\n }\n\n // Mask supported styles\n @supports (mask: url(\"\")) {\n background: none;\n background-color: if($color == currentColor, $color, color($color));\n mask-image: url(\"#{$path}/usa-icons/#{$filename-base}.svg\"),\n linear-gradient(transparent, transparent);\n mask-position: $position-x $position-y;\n mask-repeat: no-repeat;\n mask-size: $width $height;\n\n @if $color-hover {\n &:hover {\n background-color: color($color-hover);\n }\n }\n }\n}\n\n// Places an icon before or after an element as an inline-block,\n// using the `:before` or `:after` pseudoelements.\n@mixin place-icon(\n $icon-object,\n $direction,\n $margin: \"auto\",\n $vertical-align: middle,\n $contrast-bg: \"default\"\n) {\n $color-hover: if(\n map.has-key($icon-object, \"color-hover\"),\n map.get($icon-object, \"color-hover\"),\n null\n );\n &::#{$direction} {\n @include add-color-icon($icon-object, $contrast-bg);\n content: \"\";\n vertical-align: $vertical-align;\n\n @if $direction == \"after\" {\n margin-left: units($margin);\n } @else {\n margin-right: units($margin);\n }\n }\n\n @if $color-hover {\n &:hover::#{$direction} {\n content: \"\"; // Added to address a weird display bug\n background-color: color($color-hover);\n }\n }\n}\n","@use \"uswds-core\" as *;\n\n.usa-list {\n @include usa-list;\n\n li {\n @include usa-list-item;\n }\n}\n\n// Unstyled lists\n@include override-prose {\n .usa-list--unstyled {\n @include unstyled-list;\n }\n}\n","@use \"../../functions\" as *;\n@use \"../../mixins/utilities\" as *;\n@use \"../../settings\" as *;\n\n@mixin usa-list {\n @include u-margin-y(1em);\n line-height: line-height($theme-body-font-family, $theme-body-line-height);\n padding-left: 3ch;\n\n &:last-child {\n margin-bottom: 0;\n }\n\n ul,\n ol {\n margin-top: 0.25em;\n }\n}\n\n@mixin usa-list-item {\n margin-bottom: 0.25em;\n max-width: measure($theme-text-measure);\n\n &:last-child {\n margin-bottom: 0;\n }\n}\n\n@mixin usa-list-styles {\n ul,\n ol {\n @include usa-list;\n\n li {\n @include usa-list-item;\n }\n }\n}\n","@use \"../utilities\" as *;\n\n// Unstyled list helper\n@mixin unstyled-list() {\n @include u-margin-y(0);\n list-style-type: none;\n padding-left: 0;\n\n > li {\n margin-bottom: 0;\n max-width: unset;\n }\n}\n","@use \"uswds-core\" as *;\n\n.usa-paragraph {\n @include typeset-p;\n}\n","@use \"uswds-core\" as *;\n\n.usa-prose {\n @include typeset($theme-prose-font-family);\n\n & > {\n @include usa-list-styles;\n @include usa-table-styles;\n\n p {\n @include typeset-p-base;\n }\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n @include typeset-heading-base;\n }\n\n * + * {\n margin-top: $theme-paragraph-margin-top;\n margin-bottom: 0;\n }\n\n * + {\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin-top: $theme-heading-margin-top;\n }\n }\n\n // Replaces styles from usa-headings-styles\n h1 {\n @include h1;\n }\n h2 {\n @include h2;\n }\n h3 {\n @include h3;\n }\n h4 {\n @include h4;\n }\n h5 {\n @include h5;\n }\n h6 {\n @include h6;\n }\n }\n}\n\n@mixin prose-test {\n .usa-prose {\n & > {\n p {\n @include typeset-p-base;\n }\n\n h1 {\n margin-bottom: 0;\n margin-top: 0;\n clear: both;\n }\n\n * + * {\n margin-top: $theme-paragraph-margin-top;\n }\n\n * + h1 {\n margin-top: $theme-heading-margin-top;\n }\n }\n }\n}\n",null,"@use \"../../settings\" as *;\n@use \"../../functions\" as *;\n@use \"button-unstyled\" as *;\n@use \"../helpers\" as *;\n@use \"../utilities\" as *;\n@use \"../typography/typeset\" as *;\n\n$table-background-color: $theme-table-background-color;\n\n@if $table-background-color == \"default\" {\n $table-background-color: get-default(\"bg-color\");\n}\n\n$table-text-color: get-color-token-from-bg(\n $bg-color: $theme-table-background-color,\n $preferred-text-token: $theme-table-text-color,\n $context: \"Table text\",\n);\n\n$table-header-text-color: color(\n get-color-token-from-bg(\n $bg-color: $theme-table-header-background-color,\n $preferred-text-token: $theme-table-header-text-color,\n $context: \"Table header text\",\n )\n);\n\n$table-stripe-text-color: color(\n get-color-token-from-bg(\n $bg-color: $theme-table-stripe-background-color,\n $preferred-text-token: $theme-table-stripe-text-color,\n $context: \"Table stripe text\",\n )\n);\n\n$table-sorted-text-color: color(\n get-color-token-from-bg(\n $bg-color: $theme-table-sorted-background-color,\n $context: \"Table sorted text\",\n )\n);\n\n$table-sorted-header-text-color: color(\n get-color-token-from-bg(\n $bg-color: $theme-table-sorted-header-background-color,\n $preferred-text-token: $theme-table-header-text-color,\n $context: \"Table sorted header text\",\n )\n);\n\n$table-sorted-stripe-text-color: color(\n get-color-token-from-bg(\n $bg-color: $theme-table-sorted-stripe-background-color,\n $preferred-text-token: $theme-table-stripe-text-color,\n $context: \"Table sorted stripe text\",\n )\n);\n\n$table-sorted-icon-color: color(\n get-color-token-from-bg(\n $bg-color: $theme-table-sorted-header-background-color,\n $preferred-text-token: $theme-table-sorted-icon-color,\n $context: \"Table sorted icon\",\n )\n);\n\n$table-unsorted-icon-color: get-color-token-from-bg(\n $bg-color: $theme-table-header-background-color,\n $preferred-text-token: $theme-table-unsorted-icon-color,\n $context: \"Table unsorted icon\",\n);\n\n// Shared table styles\n@mixin table-header-unsorted-styles {\n padding-right: units(5);\n position: relative;\n &::after {\n border-bottom-color: transparent;\n border-bottom-style: solid;\n border-bottom-width: units(1px);\n bottom: 0;\n content: \"\";\n height: 0;\n left: 0;\n position: absolute;\n width: 100%;\n }\n}\n\n@mixin table-button-default-styles {\n @include button-unstyled;\n @include u-square(4);\n background-position: center center;\n background-size: units(3);\n color: color($theme-table-unsorted-icon-color);\n cursor: pointer;\n display: inline-block;\n margin: 0;\n position: absolute;\n right: 0.25rem;\n text-align: center;\n text-decoration: none;\n // vertically center button within table header\n top: 50%;\n transform: translate(0, -50%);\n .usa-icon {\n @include u-square(3);\n vertical-align: middle;\n & > g {\n fill: transparent;\n }\n }\n}\n\n// The SVG in the sortable column button contains three icon shapes.\n// This CSS controls which of the shapes is 'filled' when active.\n\n@mixin table-button-unsorted-styles {\n @include table-button-default-styles;\n .usa-icon > g.unsorted {\n fill: color($table-unsorted-icon-color);\n }\n &:hover .usa-icon > g.unsorted {\n fill: color(next-token($table-unsorted-icon-color, \"darker\"));\n }\n}\n\n@mixin table-button-sorted-ascending-styles {\n @include table-button-default-styles;\n .usa-icon > g.ascending {\n fill: $table-sorted-icon-color;\n }\n}\n\n@mixin table-button-sorted-descending-styles {\n @include table-button-default-styles;\n .usa-icon > g.descending {\n fill: $table-sorted-icon-color;\n }\n}\n\n@mixin table-stacked-styles {\n thead {\n display: none;\n }\n\n th {\n background-color: color($table-background-color);\n }\n\n th,\n td {\n border-bottom-width: 0;\n display: block;\n width: 100%;\n }\n\n tr {\n border-bottom: units(0.5) solid color($theme-table-border-color);\n border-top-width: 0;\n width: 100%;\n th:first-child,\n td:first-child {\n border-top-width: 0;\n }\n &:nth-child(odd) {\n td,\n th {\n background-color: inherit;\n }\n }\n\n &:first-child {\n th:first-child,\n td:first-child {\n border-top: units(0.5) solid color($theme-table-border-color);\n }\n }\n }\n\n th[data-label],\n td[data-label] {\n padding-bottom: units(1.5);\n\n &:before {\n content: attr(data-label);\n display: block;\n font-weight: fw(\"bold\");\n margin: units(-1) units(-2) units(0);\n padding: units(1.5) units(2) units(0.5);\n }\n }\n}\n\n@mixin table-stacked-header-styles {\n tr {\n td:first-child,\n th:first-child {\n @include typeset(\n $theme-body-font-family,\n $theme-h4-font-size,\n $theme-heading-line-height\n );\n background-color: color($theme-table-header-background-color);\n color: $table-header-text-color;\n font-weight: fw(\"bold\");\n padding: units(1.5) units(2);\n &:before {\n display: none;\n }\n }\n }\n}\n\n@mixin usa-table {\n @include border-box-sizing;\n @include typeset;\n border-collapse: collapse;\n border-spacing: 0;\n color: color($table-text-color);\n margin: units(2.5) 0;\n text-align: left;\n\n thead td,\n tfoot td,\n th {\n background-clip: padding-box;\n line-height: line-height($theme-body-font-family, $theme-input-line-height);\n background-color: color($theme-table-header-background-color);\n color: $table-header-text-color;\n }\n\n th,\n td {\n border: 1px solid color($theme-table-border-color);\n padding: units(1) units(2);\n }\n\n td {\n background-color: color($table-background-color);\n font-weight: fw(\"normal\");\n }\n\n caption {\n @include u-font(\"body\", \"xs\");\n font-weight: fw(\"bold\");\n margin-bottom: units(1.5);\n text-align: left;\n }\n\n /* stylelint-disable selector-class-pattern */\n th[data-sortable] {\n @include table-header-unsorted-styles;\n\n &:not([aria-sort]),\n &[aria-sort=\"none\"] {\n .usa-table__header__button {\n @include table-button-unsorted-styles;\n }\n }\n\n &[aria-sort=\"descending\"],\n &[aria-sort=\"ascending\"] {\n background-color: color($theme-table-sorted-header-background-color);\n }\n\n &[aria-sort=\"descending\"] {\n .usa-table__header__button {\n @include table-button-sorted-descending-styles;\n }\n }\n\n &[aria-sort=\"ascending\"] {\n .usa-table__header__button {\n @include table-button-sorted-ascending-styles;\n }\n }\n }\n /* stylelint-enable selector-class-pattern */\n\n thead {\n th[aria-sort] {\n background-color: color($theme-table-sorted-header-background-color);\n color: $table-sorted-header-text-color;\n }\n }\n\n td[data-sort-active],\n th[data-sort-active] {\n background-color: color($theme-table-sorted-background-color);\n color: $table-sorted-text-color;\n }\n}\n\n@mixin usa-table--borderless {\n th,\n thead td,\n tfoot td {\n background-color: color($table-background-color);\n }\n\n th {\n border-top: 0;\n color: color($table-text-color);\n\n &[aria-sort] {\n color: $table-sorted-header-text-color;\n }\n }\n /* stylelint-disable selector-class-pattern */\n th[data-sortable]:not([aria-sort]) {\n .usa-table__header__button .usa-icon > g.unsorted {\n fill: color($table-text-color);\n }\n\n .usa-table__header__button:hover .usa-icon > g.unsorted {\n fill: color(next-token($table-text-color, \"darker\"));\n }\n }\n /* stylelint-enable selector-class-pattern */\n th,\n td {\n border-left: 0;\n border-right: 0;\n }\n}\n\n@mixin usa-table--compact {\n th,\n td {\n padding: units(0.5) units(1.5);\n }\n}\n\n@mixin usa-table--striped {\n tbody {\n tr:nth-child(odd) {\n td {\n background-color: color($theme-table-stripe-background-color);\n color: $table-stripe-text-color;\n &[data-sort-active] {\n background-color: color($theme-table-sorted-stripe-background-color);\n color: $table-sorted-stripe-text-color;\n }\n }\n }\n }\n}\n\n@mixin usa-table--stacked {\n @include table-stacked-styles;\n}\n\n@mixin usa-table--stacked-header {\n @include table-stacked-styles;\n @include table-stacked-header-styles;\n}\n\n@mixin usa-table--sticky-header {\n border: 1px solid color($theme-table-border-color);\n border-collapse: separate;\n\n td,\n th {\n border-left: none;\n border-top: none;\n\n &:last-child {\n border-right: none;\n }\n }\n\n tfoot {\n td,\n th {\n border-top: 1px solid color($theme-table-border-color);\n border-bottom: none;\n }\n }\n\n tbody tr:last-child {\n td,\n th {\n border-bottom: none;\n }\n }\n\n thead {\n position: sticky;\n top: $theme-table-sticky-top-offset;\n }\n\n &.usa-table--borderless {\n border: none;\n\n th {\n background-color: color($table-background-color);\n }\n\n td,\n th {\n border-right: none;\n }\n }\n}\n\n@mixin usa-table-container--scrollable {\n margin: units(2.5) 0;\n overflow-y: hidden;\n\n .usa-table {\n margin: 0;\n }\n\n td {\n white-space: nowrap;\n }\n}\n","@use \"../general/table\" as *;\n@use \"../helpers/at-media\" as *;\n\n@mixin usa-table-styles {\n table {\n @include usa-table;\n }\n .usa-table--borderless {\n @include usa-table--borderless;\n }\n .usa-table--compact {\n @include usa-table--compact;\n }\n .usa-table--striped {\n @include usa-table--striped;\n }\n .usa-table--stacked {\n @include at-media-max(\"mobile-lg\") {\n @include table-stacked-styles;\n }\n }\n .usa-table--stacked-header {\n @include at-media-max(\"mobile-lg\") {\n @include table-stacked-styles;\n @include table-stacked-header-styles;\n }\n }\n .width-mobile {\n .usa-table--stacked {\n @include usa-table--stacked;\n }\n .usa-table--stacked-header {\n @include usa-table--stacked-header;\n }\n }\n .usa-table-container--scrollable {\n @include usa-table-container--scrollable;\n }\n}\n","@use \"../../settings\" as *;\n@use \"../../functions\" as *;\n@use \"../../mixins/utilities\" as *;\n@use \"../typography/typeset\" as *;\n\n///\n/// Removes button styles and adds link styles.\n/// Includes hover, active, disabled, and focus states for accessibility.\n///\n/// @example\n/// .my-unstyled-button {\n/// @include button-unstyled;\n/// }\n///\n@mixin button-unstyled {\n @include typeset-link;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n font-weight: font-weight(\"normal\");\n justify-content: normal;\n text-align: left;\n margin: 0;\n padding: 0;\n width: auto;\n\n &:hover,\n &.usa-button--hover,\n &:disabled:hover,\n &[aria-disabled=\"true\"]:hover,\n &:disabled.usa-button--hover,\n &[aria-disabled=\"true\"].usa-button--hover,\n &:active,\n &.usa-button--active,\n &:disabled:active,\n &[aria-disabled=\"true\"]:active,\n &:disabled.usa-button--active,\n &[aria-disabled=\"true\"].usa-button--active,\n &:disabled:focus,\n &[aria-disabled=\"true\"]:focus,\n &:disabled.usa-focus,\n &[aria-disabled=\"true\"].usa-focus,\n &:disabled,\n &[aria-disabled=\"true\"],\n &.usa-button--disabled {\n background-color: transparent;\n box-shadow: none;\n text-decoration: underline;\n }\n\n &.usa-button--hover {\n color: color($theme-link-hover-color);\n }\n\n &.usa-button--active {\n color: color($theme-link-active-color);\n }\n\n &:disabled,\n &[aria-disabled=\"true\"],\n &:disabled:hover,\n &[aria-disabled=\"true\"]:hover,\n &[aria-disabled=\"true\"]:focus {\n color: color(\"disabled\");\n\n @media (forced-colors: active) {\n color: color(GrayText);\n }\n }\n}\n","@use \"sass:map\";\n@use \"uswds-core\" as *;\n\n// Variables\n$accordion-context: \"Accordion\";\n\n$accordion-border: units($theme-accordion-border-width) solid\n color($theme-accordion-border-color);\n\n$accordion-button-background-active-color: next-token(\n $theme-accordion-button-background-color,\n \"darker\"\n);\n\n// Maps for High Contrast Mode\n\n$accordion-icon-map-defaults: (\n color: color(\"ButtonText\"),\n svg-height: 20,\n svg-width: 20,\n height: units(3),\n);\n\n$accordion-button-unopen-hc-icon: map-merge(\n $accordion-icon-map-defaults,\n (\n \"name\": \"add\",\n )\n);\n\n$accordion-button-open-hc-icon: map-merge(\n $accordion-icon-map-defaults,\n (\n \"name\": \"remove\",\n )\n);\n\n// Accordion Styles\n@mixin accordion-list-styles {\n @include unstyled-list;\n color: color(\"ink\");\n margin: 0;\n padding: 0;\n width: 100%;\n}\n\n@mixin accordion-hc-icon-styles {\n height: 100%;\n position: absolute;\n right: units(2.5);\n top: 0;\n}\n\n// Opened styles\n@mixin accordion-button-styles {\n @include button-unstyled;\n @include set-text-and-bg(\n $theme-accordion-button-background-color,\n $context: $accordion-context\n );\n @include set-icon-from-bg(\n $theme-accordion-button-background-color,\n \"usa-icons/remove\",\n \"usa-icons-bg/remove--white\"\n );\n background-position: right units(2.5) center;\n background-size: units(3);\n cursor: pointer;\n display: inline-block;\n font-weight: font-weight(\"bold\");\n margin: 0;\n padding: units(2) units(2.5) * 2 + units(2) units(2) units(2.5);\n text-decoration: none;\n width: 100%;\n\n &:hover {\n @include set-text-and-bg(\n $accordion-button-background-active-color,\n $context: $accordion-context\n );\n @include set-icon-from-bg(\n $accordion-button-background-active-color,\n \"usa-icons/remove\",\n \"usa-icons-bg/remove--white\"\n );\n text-decoration: none;\n }\n\n @media (forced-colors: active) {\n border: $border-high-contrast;\n position: relative;\n\n &::before {\n @include add-color-icon($accordion-button-open-hc-icon);\n @include accordion-hc-icon-styles();\n content: \"\";\n }\n }\n}\n\n@mixin accordion-button-unopened-styles {\n @include set-icon-from-bg(\n $theme-accordion-button-background-color,\n \"usa-icons/add\",\n \"usa-icons-bg/add--white\"\n );\n background-size: units(3);\n\n &:hover {\n @include set-icon-from-bg(\n $accordion-button-background-active-color,\n \"usa-icons/add\",\n \"usa-icons-bg/add--white\"\n );\n }\n\n @media (forced-colors: active) {\n &::before {\n @include add-color-icon($accordion-button-unopen-hc-icon);\n @include accordion-hc-icon-styles();\n }\n }\n}\n\n@mixin accordion-nested-list {\n > ul li ul {\n list-style: disc;\n > li > ul {\n list-style: circle;\n > li > ul {\n list-style: square;\n }\n }\n }\n}\n\n.usa-accordion {\n @include accordion-list-styles;\n @include accordion-nested-list;\n @include border-box-sizing;\n @include typeset($theme-accordion-font-family);\n\n + .usa-accordion,\n + .usa-accordion--bordered {\n margin-top: units(1);\n }\n}\n\n.usa-accordion--bordered {\n .usa-accordion__content {\n border-bottom: $accordion-border;\n border-left: $accordion-border;\n border-right: $accordion-border;\n padding-bottom: units(2);\n }\n\n .usa-accordion__heading {\n margin-bottom: 0;\n }\n}\n\n.usa-accordion__heading,\n// kludge to override .usa-prose styles\n// TODO: work this into a mixin\n.usa-prose .usa-accordion__heading {\n @include typeset($theme-accordion-font-family, $theme-body-font-size, 1);\n margin: 0;\n\n &:not(:first-child) {\n margin-top: units(1);\n }\n}\n\n.usa-accordion__content {\n @include set-text-and-bg(\n $theme-accordion-background-color,\n $context: $accordion-context\n );\n margin-top: 0;\n overflow: auto;\n padding: units(2) units(2.5) calc(#{units(2)} - #{units(0.5)}) units(2.5);\n\n > *:first-child {\n margin-top: 0;\n }\n\n > *:last-child {\n margin-bottom: 0;\n }\n}\n\n.usa-accordion__button {\n @include accordion-button-styles;\n}\n\n.usa-accordion__button[aria-expanded=\"false\"] {\n @include accordion-button-unopened-styles;\n}\n","@use \"../../settings\" as *;\n\n// Ensure browsers that don't support SVG in background-image (IE 11 and below) fall back to PNG.\n// See https://css-tricks.com/a-complete-guide-to-svg-fallbacks/\n\n@mixin add-background-svg($image-name, $image-path: $theme-image-path) {\n background-image: url(\"#{$image-path}/#{$image-name}.svg\"),\n linear-gradient(transparent, transparent);\n background-repeat: no-repeat;\n}\n","@use \"../tokens/color/high-contrast-mode-colors\";\n@use \"../functions/utilities/color\" as *;\n\n$border-high-contrast: 2px solid transparent;\n$border-high-contrast-disabled: 2px solid color(GrayText);\n","@use \"sass:math\";\n\n@use \"uswds-core\" as *;\n\n// Alert variables ---------- //\n$alert-icons: (\n success: \"check_circle\",\n warning: \"warning\",\n error: \"error\",\n info: \"info\",\n emergency: \"error\",\n);\n\n.usa-alert {\n @include alert-styles;\n\n .usa-alert__body {\n @include u-padding-x($theme-alert-padding-x);\n\n &::before {\n left: calc(\n units($theme-alert-padding-x) + $alert-icon-optical-adjust-left\n );\n }\n }\n\n * + & {\n margin-top: units(2);\n }\n}\n\n@each $name, $icon in $alert-icons {\n .usa-alert--#{$name} {\n @include alert-status-wrapper-styles($name);\n\n .usa-alert__body {\n @include alert-status-body-styles($name, $icon);\n }\n }\n}\n\n.usa-alert--slim {\n @include alert-styles-slim;\n\n .usa-alert__body::before {\n left: calc(\n units($theme-alert-padding-x) + $alert-slim-icon-optical-adjust-left\n );\n }\n}\n\n.usa-alert--no-icon {\n @include alert-styles-no-icon;\n}\n\n.usa-alert--validation {\n .usa-checklist {\n margin-top: units(2);\n }\n}\n","@use \"sass:math\";\n@use \"../../settings\" as *;\n@use \"../../functions\" as *;\n@use \"./border-box-sizing\" as *;\n@use \"./set-text-and-bg\" as *;\n@use \"../general/icon\" as *;\n@use \"../utilities\" as *;\n@use \"../typography/typeset.scss\" as *;\n@use \"../helpers/set-link-from-bg\" as *;\n\n$alert-icon-gap: 1;\n$alert-slim-icon-size: 3;\n$alert-slim-icon-padding: 1;\n\n// Optical adjustment for icons\n// Adjusts the position to accommodate the 1/12 empty space built into the icon SVGs\n$alert-icon-optical-adjust-top: calc(\n units($theme-alert-padding-y) - units($theme-alert-icon-size) / 6\n);\n$alert-icon-optical-adjust-left: calc(units($theme-alert-icon-size) * -1 / 12);\n$alert-slim-icon-optical-adjust-left: calc(\n units($alert-slim-icon-size) * -1 / 12\n);\n\n// Base alert styles\n@mixin alert-styles {\n $bgcolor: \"base-lightest\";\n $banner-text-color-token: get-color-token-from-bg(\n $bgcolor,\n $theme-alert-text-reverse-color,\n $theme-alert-text-color,\n $context: \"Alert (default)\"\n );\n\n background-color: color($bgcolor);\n border-left: units($theme-alert-bar-width) solid color(\"base-light\");\n color: color($banner-text-color-token);\n\n .usa-alert__body {\n @include border-box-sizing;\n @include typeset($theme-alert-font-family);\n @include u-padding-y($theme-alert-padding-y);\n position: relative;\n }\n\n .usa-alert__text {\n @include u-margin-y(0);\n\n &:only-child {\n @include u-padding-y(0);\n }\n }\n\n .usa-alert__heading {\n @include typeset($theme-alert-font-family, \"lg\", 1);\n margin-top: 0;\n margin-bottom: units(1);\n }\n\n > .usa-list,\n .usa-alert__body > .usa-list {\n padding-left: 2ch;\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n}\n\n// Set status styles for alert wrapper/background\n@mixin alert-status-wrapper-styles($name) {\n $bgcolor: if($name != \"emergency\", \"#{$name}-lighter\", $name);\n\n background-color: color($bgcolor);\n border-left-color: color($name);\n}\n\n// Set status styles for alert content\n// added to __body element\n@mixin alert-status-body-styles($name, $icon) {\n $bgcolor: if($name != \"emergency\", \"#{$name}-lighter\", $name);\n $banner-text-color-token: get-color-token-from-bg(\n $bgcolor,\n $theme-alert-text-reverse-color,\n $theme-alert-text-color,\n $context: \"Alert (#{$name})\"\n );\n @include add-alert-icon($icon, $banner-text-color-token, $bgcolor);\n @include set-text-and-bg($bgcolor);\n display: flex;\n flex-direction: column;\n justify-content: center;\n min-height: calc(\n units($theme-alert-icon-size) + $alert-icon-optical-adjust-top * 2\n );\n\n > * {\n margin-left: calc(units($theme-alert-icon-size) + units($alert-icon-gap));\n }\n\n .usa-link {\n @include set-link-from-bg(\n $bgcolor,\n $theme-alert-link-reverse-color,\n $theme-alert-link-color,\n $context: \"Alert (#{$name})\"\n );\n }\n}\n\n@mixin add-alert-icon($name, $color, $bgcolor) {\n $this-icon-object: (\n \"name\": $name,\n \"color\": $color,\n \"svg-height\": 40,\n \"svg-width\": 40,\n \"height\": $theme-alert-icon-size,\n );\n\n &::before {\n @include add-color-icon($this-icon-object, $bgcolor);\n content: \"\";\n display: block;\n position: absolute;\n top: $alert-icon-optical-adjust-top;\n }\n}\n\n// Variant - no icon\n@mixin alert-styles-no-icon {\n .usa-alert__body {\n min-height: 0;\n\n &:before {\n display: none;\n }\n\n > * {\n margin-left: 0;\n }\n }\n}\n\n// Variant - slim\n@mixin add-slim-alert-icon {\n &:before {\n @supports (mask: url(\"\")) {\n mask-size: units($alert-slim-icon-size);\n }\n height: units($alert-slim-icon-size);\n top: units($alert-slim-icon-padding);\n width: units($alert-slim-icon-size);\n }\n}\n\n@mixin alert-styles-slim {\n .usa-alert__body {\n @include u-padding-y($alert-slim-icon-padding);\n @include add-slim-alert-icon;\n min-height: 0;\n\n > * {\n margin-left: calc(units($alert-slim-icon-size) + units($alert-icon-gap));\n }\n }\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n// Adds padding either l/r(x) or t/b(y)\n\n@mixin padding-n($side, $value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n @if $side == all {\n padding: get-uswds-value(\"padding\", $value...) #{$important};\n } @else if $side == x {\n padding-left: get-uswds-value(\"padding\", $value...) #{$important};\n padding-right: get-uswds-value(\"padding\", $value...) #{$important};\n } @else if $side == y {\n padding-bottom: get-uswds-value(\"padding\", $value...) #{$important};\n padding-top: get-uswds-value(\"padding\", $value...) #{$important};\n } @else {\n padding-#{$side}: get-uswds-value(\"padding\", $value...) #{$important};\n }\n}\n\n@mixin u-padding($value...) {\n @include padding-n(all, $value...);\n}\n\n@mixin u-padding-x($value...) {\n @include padding-n(x, $value...);\n}\n\n@mixin u-padding-y($value...) {\n @include padding-n(y, $value...);\n}\n\n@mixin u-padding-top($value...) {\n @include padding-n(top, $value...);\n}\n\n@mixin u-padding-right($value...) {\n @include padding-n(right, $value...);\n}\n\n@mixin u-padding-bottom($value...) {\n @include padding-n(bottom, $value...);\n}\n\n@mixin u-padding-left($value...) {\n @include padding-n(left, $value...);\n}\n","@use \"sass:math\";\n@use \"sass:list\";\n\n@use \"uswds-core\" as *;\n\n$banner-context: \"Banner\";\n$banner-guidance-measure: 3;\n$banner-icon-colors: get-link-tokens-from-bg(\n $theme-banner-background-color,\n $theme-banner-link-color,\n $context: $banner-context\n);\n$banner-icon-color: list.nth($banner-icon-colors, 1);\n$banner-icon-hover: list.nth($banner-icon-colors, 2);\n$banner-icon-chevron: (\n \"name\": \"expand_more\",\n \"svg-height\": 40,\n \"svg-width\": 40,\n \"height\": 2,\n \"color\": $banner-icon-color,\n \"color-variant\": \"white\",\n \"color-hover\": $banner-icon-hover,\n);\n$banner-icon-chevron-up: map-merge(\n $banner-icon-chevron,\n (\n \"name\": \"expand_less\",\n )\n);\n$banner-icon-close: (\n \"name\": \"close\",\n \"svg-height\": 40,\n \"svg-width\": 40,\n \"height\": 3,\n \"color\": \"blue-60v\",\n \"color-variant\": \"white\",\n \"container-height\": $size-touch-target,\n \"container-width\": $size-touch-target,\n);\n\n.usa-banner {\n @include typeset($theme-banner-font-family);\n @include border-box-sizing;\n background-color: color($theme-banner-background-color);\n\n @include at-media(\"tablet\") {\n font-size: font-size($theme-banner-font-family, \"3xs\");\n padding-bottom: units(0);\n }\n\n .usa-accordion {\n @include typeset($theme-banner-font-family);\n }\n\n // ! Stylelint will complain about BEM formatting.\n // Added grid classes in #5000 to remove layout grid dependency.\n // stylelint-disable selector-class-pattern\n .grid-row {\n @include grid-row;\n\n &.grid-gap-lg {\n @include grid-gap(\"lg\");\n }\n\n .tablet\\:grid-col-6 {\n @include at-media(\"tablet\") {\n @include grid-col(6);\n }\n }\n }\n // stylelint-enable\n}\n\n.usa-banner__header,\n.usa-banner__content {\n @include set-text-from-bg(\n $theme-banner-background-color,\n $context: $banner-context\n );\n}\n\n.usa-banner__content {\n @include grid-container($theme-banner-max-width);\n @include add-responsive-site-margins;\n background-color: color(\"transparent\");\n font-size: font-size($theme-banner-font-family, 4);\n overflow: hidden;\n padding-bottom: units(2);\n padding-left: units($theme-site-margins-mobile-width) - units(1);\n padding-top: units(0.5);\n width: 100%;\n\n @include at-media(\"tablet\") {\n @include u-padding-y(3);\n }\n\n p {\n &:first-child {\n margin: 0;\n }\n }\n}\n\n.usa-banner__guidance {\n @include u-display(\"flex\");\n @include u-flex(\"align-start\");\n @include u-measure($banner-guidance-measure);\n padding-top: units(2);\n\n @include at-media(\"tablet\") {\n padding-top: units(0);\n }\n}\n\n.usa-banner__lock-image {\n $lock-h: 64; // unitless height of svg\n $lock-w: 52; // unitless width of svg\n $lock-aspect: math.div($lock-w, $lock-h);\n $icon-height: 1.5ex; // height of the lock icon; use ex for resilience\n\n height: $icon-height;\n width: $icon-height * $lock-aspect;\n path {\n fill: currentColor;\n\n @media (forced-colors: active) {\n fill: CanvasText;\n }\n }\n}\n\n.usa-banner__inner {\n @include add-responsive-site-margins;\n @include grid-container($theme-banner-max-width);\n @include grid-row;\n @include u-flex(\"align-start\");\n padding-right: units(0);\n\n @include at-media(\"tablet\") {\n @include u-flex(\"align-center\");\n }\n}\n\n.usa-banner__header {\n @include u-padding-y(1);\n font-size: font-size($theme-banner-font-family, 1);\n font-weight: font-weight(\"normal\");\n min-height: units($size-touch-target);\n position: relative;\n\n @include at-media(\"tablet\") {\n @include u-padding-y(0.5);\n min-height: 0;\n }\n}\n\n.usa-banner__header-text {\n @include u-margin-y(0);\n font-size: font-size($theme-banner-font-family, 1);\n line-height: line-height($theme-banner-font-family, 2);\n}\n\n.usa-banner__header-action {\n @include place-icon($banner-icon-chevron, \"after\");\n @include set-link-from-bg(\n $theme-banner-background-color,\n $theme-banner-link-color,\n $context: $banner-context\n );\n\n line-height: line-height($theme-banner-font-family, 2);\n margin-bottom: units(0);\n margin-top: units(2px);\n text-decoration: underline;\n\n .usa-banner__header--expanded & {\n display: none;\n }\n\n @include at-media(\"tablet\") {\n display: none;\n }\n\n @media (forced-colors: active) {\n color: LinkText;\n\n &::after {\n background-color: ButtonText;\n }\n }\n}\n\n.usa-banner__header-flag {\n @include u-float(\"left\");\n margin-right: units(1);\n width: units(2);\n\n @include at-media(\"tablet\") {\n margin-right: units(1);\n padding-top: units(0);\n }\n}\n\n.usa-banner__header--expanded {\n padding-right: units($size-touch-target) + units(1);\n\n @include at-media(\"tablet\") {\n background-color: transparent;\n display: block;\n font-size: font-size($theme-banner-font-family, 1);\n font-weight: font-weight(\"normal\");\n min-height: units(0);\n padding-right: units(0);\n }\n\n .usa-banner__inner {\n margin-left: units(0);\n\n @include at-media(\"tablet\") {\n margin-left: units(auto);\n }\n }\n\n .usa-banner__header-action {\n display: none;\n }\n}\n\n.usa-banner__button {\n @include button-unstyled;\n @include u-pin(\"left\");\n @include u-pin(\"y\");\n @include u-text(\"primary\", underline);\n @include set-link-from-bg(\n $theme-banner-background-color,\n $theme-banner-link-color,\n $context: $banner-context\n );\n display: block;\n font-size: font-size($theme-banner-font-family, 1);\n height: auto;\n line-height: line-height($theme-banner-font-family, 2);\n padding-top: units(0);\n padding-left: units(0);\n text-decoration: none;\n width: auto;\n\n @include at-media-max(\"tablet\") {\n width: 100%;\n\n &:enabled:focus {\n // adjust outline to render within the viewport\n outline-offset: units(-0.5);\n }\n }\n\n @include at-media(\"tablet\") {\n @include place-icon($banner-icon-chevron, \"after\", \"2px\");\n @include set-link-from-bg(\n $theme-banner-background-color,\n $theme-banner-link-color,\n $context: $banner-context\n );\n @include u-pin(\"none\");\n display: inline;\n margin-left: units(1);\n position: relative;\n\n &::after,\n &:hover::after {\n position: absolute;\n\n @media (forced-colors: active) {\n background-color: ButtonText;\n }\n }\n\n &:hover {\n // Underline added to inner text instead.\n text-decoration: none;\n }\n }\n\n // Remove icon set from usa-accordion.\n // Also removed in _usa-nav.scss.\n &[aria-expanded=\"false\"],\n &[aria-expanded=\"false\"]:hover,\n &[aria-expanded=\"true\"],\n &[aria-expanded=\"true\"]:hover {\n background-image: none;\n\n @media (forced-colors: active) {\n &::before {\n content: none;\n }\n }\n }\n\n &[aria-expanded=\"true\"] {\n @include at-media-max(\"tablet\") {\n @include place-icon(\n $banner-icon-close,\n \"after\",\n 0,\n middle,\n \"base-lighter\"\n );\n\n &::before {\n @include u-pin(\"y\");\n @include u-pin(\"right\");\n background-color: color(\"base-lighter\");\n content: \"\";\n display: block;\n height: units($size-touch-target);\n width: units($size-touch-target);\n }\n &::after {\n @include u-pin(\"y\");\n @include u-pin(\"right\");\n }\n }\n\n @include at-media(\"tablet\") {\n @include place-icon(\n $banner-icon-chevron-up,\n \"after\",\n \"2px\",\n middle,\n $theme-banner-background-color\n );\n height: auto;\n padding: units(0);\n position: relative;\n\n &::after,\n &:hover::after {\n position: absolute;\n\n @media (forced-colors: active) {\n background-color: ButtonText;\n }\n }\n }\n }\n}\n\n.usa-banner__button-text {\n @include add-sr-only;\n text-decoration: underline;\n\n @include at-media(\"tablet\") {\n @include add-no-sr-only;\n display: inline;\n }\n\n @media (forced-colors: active) {\n color: LinkText;\n }\n}\n\n.usa-banner__icon {\n width: units(5);\n}\n\n// [uswds-init.js] Offscreen content while js is loading\n.usa-js-loading {\n .usa-banner__content {\n @include add-sr-only;\n }\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n// Outputs display\n\n@mixin u-display($value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n display: get-uswds-value(\"display\", $value) #{$important};\n}\n","@use \"sass:list\";\n@use \"sass:map\";\n@use \"../../functions\" as *;\n@use \"../../properties\" as *;\n\n// Outputs flex\n\n$flex-utililies: (\n \"align-items\": map-collect(\n map-deep-get($system-properties, \"align-items\", standard),\n map-deep-get($system-properties, \"align-items\", extended)\n ),\n \"align-self\": map-collect(\n map-deep-get($system-properties, \"align-self\", standard),\n map-deep-get($system-properties, \"align-self\", extended)\n ),\n \"flex\": map-collect(\n map-deep-get($system-properties, \"flex\", standard),\n map-deep-get($system-properties, \"flex\", extended)\n ),\n \"flex-direction\": map-collect(\n map-deep-get($system-properties, \"flex-direction\", standard),\n map-deep-get($system-properties, \"flex-direction\", extended)\n ),\n \"flex-wrap\": map-collect(\n map-deep-get($system-properties, \"flex-wrap\", standard),\n map-deep-get($system-properties, \"flex-wrap\", extended)\n ),\n \"justify-content\": map-collect(\n map-deep-get($system-properties, \"justify-content\", standard),\n map-deep-get($system-properties, \"justify-content\", extended)\n ),\n);\n\n@mixin u-flex($value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n @each $this-value in $value {\n $match: false;\n @each $property, $map in $flex-utililies {\n @if not $match and map.has-key($map, $this-value) {\n #{$property}: get-uswds-value($property, $this-value...) #{$important};\n $match: true;\n }\n }\n @if not $match {\n @error '`#{$this-value}` is not a valid `flex` value.';\n }\n }\n}\n","@use \"sass:list\";\n@use \"sass:map\";\n@use \"../layout-grid\" as *;\n@use \"../../functions\" as *;\n@use \"../../mixins/helpers\" as *;\n@use \"../../mixins/utilities\" as *;\n@use \"../../tokens\" as *;\n@use \"../../variables/column-gaps\" as *;\n@use \"../../settings\" as *;\n\n@mixin grid-gap-responsive {\n $gap-mobile: if(\n map.has-key($system-column-gaps, $theme-column-gap-mobile),\n map.get($system-column-gaps, $theme-column-gap-mobile),\n \"error\"\n );\n $gap-desktop: if(\n map.has-key($system-column-gaps, $theme-column-gap-desktop),\n map.get($system-column-gaps, $theme-column-gap-desktop),\n \"error\"\n );\n\n @if $gap-mobile == \"error\" {\n @error '$theme-column-gap-mobile is not set to a valid column gap width.';\n }\n\n @if $gap-desktop == \"error\" {\n @error '$theme-column-gap-desktop is not set to a valid column gap width.';\n }\n\n @include u-margin-x(\n unquote(\"#{$neg-prefix}-#{calc-gap-offset($gap-mobile)}\")\n );\n\n > * {\n @include this-border-box-sizing;\n @include u-padding-x(calc-gap-offset($gap-mobile));\n }\n\n @include at-media(\"desktop\") {\n @include u-margin-x(\n unquote(\"#{$neg-prefix}-#{calc-gap-offset($gap-desktop)}\")\n );\n\n > * {\n @include this-border-box-sizing;\n @include u-padding-x(calc-gap-offset($gap-desktop));\n }\n }\n}\n\n@mixin grid-gap($props...) {\n $props: unpack($props);\n @if length($props) == 0 {\n @include grid-gap-responsive;\n } @else {\n $gap: smart-quote(list.nth($props, 1));\n @if $gap == 0 {\n @include u-margin-x(append-important($props, 0));\n\n > * {\n @include this-border-box-sizing;\n @include u-padding-x(append-important($props, 0));\n }\n } @else {\n @if map.has-key($project-column-gaps, $gap) {\n $gap: map.get($project-column-gaps, $gap);\n } @else if map.has-key($system-column-gaps, $gap) {\n $gap: map.get($system-column-gaps, $gap);\n }\n @include u-margin-x(\n append-important(\n $props,\n unquote(\"#{$neg-prefix}-#{calc-gap-offset($gap)}\")\n )\n );\n > * {\n @include this-border-box-sizing;\n @include u-padding-x(append-important($props, calc-gap-offset($gap)));\n }\n }\n }\n}\n\n@mixin grid-col($props...) {\n $props: unpack($props);\n @include this-border-box-sizing;\n\n @if length($props) == 0 {\n @include u-flex(fill);\n @include u-width(auto);\n } @else {\n $col: smart-quote(list.nth($props, 1));\n @if $col == \"auto\" {\n $flex: append-important($props, auto);\n $width: append-important($props, auto);\n $maxw: append-important($props, full);\n @include u-flex($flex);\n @include u-width($width);\n @include u-maxw($maxw);\n } @else if $col == \"fill\" {\n $flex: append-important($props, fill);\n $width: append-important($props, auto);\n $maxw: append-important($props, full);\n @include u-flex($flex);\n @include u-width($width);\n @include u-maxw($maxw);\n min-width: 1px; // IE 11\n } @else if not map.has-key($system-layout-grid-widths, $col) {\n @error '#{$col} is not a valid layout grid width. Valid width are #{map-keys($system-layout-grid-widths)}';\n } @else {\n $flex: append-important($props, auto);\n $width: append-important(\n $props,\n map.get($system-layout-grid-widths, $col)\n );\n @include u-flex($flex);\n @include u-width(override, $width);\n }\n }\n}\n\n@mixin grid-offset($props...) {\n $props: unpack($props);\n $offset: smart-quote(list.nth($props, 1));\n @if $offset == \"none\" {\n $width: append-important($props, 0);\n @include u-margin-left(override, $width);\n } @else if not map.has-key($system-layout-grid-widths, $offset) {\n @error '#{$offset} is not a valid layout grid width. Valid width are #{map-keys($system-layout-grid-widths)}';\n } @else {\n $width: append-important(\n $props,\n map.get($system-layout-grid-widths, $offset)\n );\n @include u-margin-left(override, $width);\n }\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n// Outputs width\n\n@mixin u-width($value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n width: get-uswds-value(\"width\", $value...) #{$important};\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n// Outputs max-width\n\n@mixin u-maxw($value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n max-width: get-uswds-value(\"max-width\", $value...) #{$important};\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n// Outputs measure (max width)\n\n@mixin u-measure($value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n max-width: get-uswds-value(\"measure\", $value...) #{$important};\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n// Outputs line-height\n\n@mixin u-float($value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n float: get-uswds-value(\"float\", $value...) #{$important};\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n// Outputs position property\n\n@mixin u-position($value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n position: get-uswds-value(\"position\", $value...) #{$important};\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n@use \"./position\" as *;\n\n$utility-pin-options: \"all\", \"x\", \"y\", \"top\", \"bottom\", \"left\", \"right\", \"none\";\n\n@mixin u-pin($value...) {\n $value: unpack($value);\n $important: null;\n $position-absolute: append-important($value, \"absolute\");\n $position-static: append-important($value, \"static\");\n $has-position: false;\n\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n\n @each $option in $value {\n $option: smart-quote($option);\n @if $option != \"none\" and not $has-position {\n @include u-position($position-absolute);\n $has-position: true;\n }\n @if $option == \"all\" {\n bottom: 0#{$important};\n left: 0#{$important};\n right: 0#{$important};\n top: 0#{$important};\n } @else if $option == \"x\" {\n left: 0#{$important};\n right: 0#{$important};\n } @else if $option == \"y\" {\n bottom: 0#{$important};\n top: 0#{$important};\n } @else if $option == \"top\" {\n top: 0#{$important};\n } @else if $option == \"bottom\" {\n bottom: 0#{$important};\n } @else if $option == \"left\" {\n left: 0#{$important};\n } @else if $option == \"right\" {\n right: 0#{$important};\n } @else if $option == \"none\" {\n $has-position: false;\n @include u-position($position-static);\n bottom: auto#{$important};\n left: auto#{$important};\n right: auto#{$important};\n top: auto#{$important};\n } @else {\n @error '`#{$option}` is not a valid `pin` value. Valid pin values include #{$utility-pin-options}';\n }\n }\n}\n\n@mixin u-pin-none($value...) {\n @include u-pin(\"none\", $value...);\n}\n\n@mixin u-pin-all($value...) {\n @include u-pin(\"all\", $value...);\n}\n\n@mixin u-pin-y($value...) {\n @include u-pin(\"y\", $value...);\n}\n\n@mixin u-pin-x($value...) {\n @include u-pin(\"x\", $value...);\n}\n\n@mixin u-pin-bottom($value...) {\n @include u-pin(\"bottom\", $value...);\n}\n\n@mixin u-pin-left($value...) {\n @include u-pin(\"left\", $value...);\n}\n\n@mixin u-pin-right($value...) {\n @include u-pin(\"right\", $value...);\n}\n\n@mixin u-pin-top($value...) {\n @include u-pin(\"top\", $value...);\n}\n","@use \"sass:list\";\n@use \"sass:map\";\n@use \"../../functions\" as *;\n@use \"../../properties\" as *;\n@use \"../../tokens\" as *;\n\n// Outputs properties based on contents of text()\n\n$text-utililies: (\n font-feature-settings: map-collect(\n map-deep-get($system-properties, font-feature-settings, standard),\n map-deep-get($system-properties, font-feature-settings, extended)\n ),\n font-style: map-collect(\n map-deep-get($system-properties, \"font-style\", standard),\n map-deep-get($system-properties, \"font-style\", extended)\n ),\n font-weight: map-collect(\n map-deep-get($system-properties, \"font-weight\", standard),\n map-deep-get($system-properties, \"font-weight\", extended)\n ),\n letter-spacing: map-collect(\n map-deep-get($system-properties, \"letter-spacing\", standard),\n map-deep-get($system-properties, \"letter-spacing\", extended)\n ),\n text-align: map-collect(\n map-deep-get($system-properties, \"text-align\", standard),\n map-deep-get($system-properties, \"text-align\", extended)\n ),\n text-decoration: map-collect(\n map-deep-get($system-properties, \"text-decoration\", standard),\n map-deep-get($system-properties, \"text-decoration\", extended)\n ),\n text-transform: map-collect(\n map-deep-get($system-properties, \"text-transform\", standard),\n map-deep-get($system-properties, \"text-transform\", extended)\n ),\n vertical-align: map-collect(\n map-deep-get($system-properties, \"vertical-align\", standard),\n map-deep-get($system-properties, \"vertical-align\", extended)\n ),\n white-space: map-collect(\n map-deep-get($system-properties, \"white-space\", standard),\n map-deep-get($system-properties, \"white-space\", extended)\n ),\n color: map-collect($tokens-color-global),\n);\n\n@mixin u-text($value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n @each $this-value in $value {\n $this-value: smart-quote($this-value);\n $match: false;\n @if map.has-key($all-color-shortcodes, $this-value) {\n $match: true;\n color: color($this-value) #{$important};\n } @else {\n @each $property, $map in $text-utililies {\n @if not $match and map.has-key($map, $this-value) {\n #{$property}: get-uswds-value($property, $this-value...)\n #{$important};\n $match: true;\n }\n }\n }\n @if not $match {\n @error '`#{$this-value}` is not a valid `text` value.';\n }\n }\n}\n","@use \"sass:math\";\n@use \"sass:map\";\n@use \"sass:list\";\n\n@use \"uswds-core\" as *;\n\n//\n// General Settings\n// =====================================\n\n// This helps balance spacing around inline-block elements\n$breadcrumb-context: \"Breadcrumb\";\n$gap-inline-spacer: -0.25em;\n$icon-vertical-spacer: -0.2em;\n\n$breadcrumb-gap: 1.5;\n$breadcrumb-icon-height: 2.5ex;\n$breadcrumb-icon-display-height: 2ex;\n$breadcrumb-icon-spacing: 0px;\n\n$icon-breadcrumb-separator: (\n \"name\": \"navigate_next\",\n \"svg-height\": 40,\n \"svg-width\": 40,\n \"height\": $breadcrumb-icon-display-height,\n \"color\": $theme-breadcrumb-separator-color,\n);\n\n$icon-breadcrumb-back: (\n \"name\": \"arrow_back\",\n \"svg-height\": 40,\n \"svg-width\": 40,\n \"height\": $breadcrumb-icon-display-height,\n \"color\": $theme-breadcrumb-separator-color,\n);\n\n// Set default value for custom mixin exdent-icon()\n$breadcrumb-back-icon-aspect: (\n map.get($icon-breadcrumb-back, \"svg-width\"),\n map.get($icon-breadcrumb-back, \"svg-height\")\n);\n\n// Defines spacing so back icon is optically placed\n@mixin exdent-icon($dim: $breadcrumb-back-icon-aspect) {\n $aspect: math.div(list.nth($dim, 1), list.nth($dim, 2));\n $icon-width: $breadcrumb-icon-display-height * $aspect;\n padding-left: calc(#{$icon-width} + #{$breadcrumb-icon-spacing});\n text-indent: calc((#{$icon-width} + #{$breadcrumb-icon-spacing}) * -1);\n}\n\n.usa-breadcrumb {\n @include typeset(\n $theme-breadcrumb-font-family,\n $theme-breadcrumb-font-size,\n 3\n );\n @include set-text-and-bg(\n $theme-breadcrumb-background-color,\n $context: $breadcrumb-context\n );\n @include u-padding-x($theme-breadcrumb-padding-x);\n\n @include at-media($theme-breadcrumb-min-width) {\n @include u-padding-bottom($theme-breadcrumb-padding-bottom);\n @include u-padding-top($theme-breadcrumb-padding-top);\n }\n\n &:not(.usa-breadcrumb--wrap) {\n .usa-breadcrumb__list {\n @include at-media($theme-breadcrumb-min-width) {\n @include u-white-space(\"no-wrap\");\n text-overflow: ellipsis;\n overflow: hidden;\n }\n }\n }\n}\n\n.usa-breadcrumb__list {\n @include unstyled-list;\n @include u-display(\"block\");\n @include u-padding($theme-focus-width);\n margin-left: units($theme-focus-width) * -1;\n margin-right: units($theme-focus-width) * -1;\n}\n\n.usa-breadcrumb__list-item {\n @include sr-only;\n @include u-display(\"inline\");\n\n @include at-media-max($theme-breadcrumb-min-width) {\n @include u-white-space(\"wrap\");\n\n // If parent link only (mobile), only show parent of current link\n &:nth-last-child(2) {\n @include not-sr-only;\n\n .usa-breadcrumb__link {\n @include exdent-icon;\n @include place-icon(\n $icon-breadcrumb-back,\n \"before\",\n 0,\n baseline,\n $theme-breadcrumb-background-color\n );\n\n @include u-display(\"inline-block\");\n @include u-padding-bottom($theme-breadcrumb-padding-bottom);\n @include u-padding-top($theme-breadcrumb-padding-top);\n\n &:before {\n bottom: $icon-vertical-spacer;\n // Magic number to center icon\n height: $breadcrumb-icon-display-height;\n position: relative;\n }\n\n // Prevent underline that extends beyond text\n &,\n &:hover,\n &:active {\n @include u-text(\"no-underline\");\n }\n span {\n @include u-text(\"underline\");\n }\n }\n\n // Override icon spacing from place-icon() with non-token value\n .usa-breadcrumb__link::before {\n margin-right: $breadcrumb-icon-spacing;\n }\n }\n }\n\n @include at-media($theme-breadcrumb-min-width) {\n @include not-sr-only;\n\n // Breadcrumb separator ›\n &:not(:last-child) {\n @include place-icon(\n $icon-breadcrumb-separator,\n \"after\",\n 0,\n baseline,\n $theme-breadcrumb-background-color\n );\n }\n\n // Style overrides for separator using non-token values\n &:not(:last-child)::after {\n // Magic number to center icon\n bottom: $icon-vertical-spacer;\n margin-left: $breadcrumb-icon-spacing;\n margin-right: $breadcrumb-icon-spacing;\n height: $breadcrumb-icon-display-height;\n position: relative;\n }\n }\n}\n\n.usa-breadcrumb__link {\n @include set-link-from-bg(\n $theme-breadcrumb-background-color,\n $theme-breadcrumb-link-color,\n $context: $breadcrumb-context\n );\n @include u-display(\"inline\");\n\n // Prevent underline that extends beyond text\n @include u-text(\"no-underline\");\n\n span {\n @include u-text(\"underline\");\n }\n}\n\n// ---------------------------------\n// Variations\n// ---------------------------------\n\n// Breadcrumb wrap\n.usa-breadcrumb--wrap {\n @include at-media($theme-breadcrumb-min-width) {\n @include u-line-height($theme-breadcrumb-font-family, 4);\n }\n\n .usa-breadcrumb__list-item {\n @include u-display(\"inline-block\");\n }\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n// Outputs white-space\n\n@mixin u-white-space($value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n white-space: get-uswds-value(\"white-space\", $value...) #{$important};\n}\n","@use \"sass:math\";\n\n@use \"uswds-core\" as *;\n\n// Default styles\n.usa-button-group {\n @include u-margin-y(0);\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n list-style-type: none;\n margin-left: units(-0.5);\n margin-right: units(-0.5);\n padding-left: 0;\n\n @include at-media(\"mobile-lg\") {\n flex-wrap: nowrap;\n align-items: stretch;\n flex-direction: row;\n }\n\n // Styles for nested button groups\n .usa-button-group {\n height: 100%;\n\n .usa-button-group__item {\n @include at-media(\"mobile-lg\") {\n margin-top: 0;\n margin-bottom: 0;\n }\n }\n\n // Styles for nested segmented button groups\n &--segmented {\n .usa-button-group__item {\n margin-top: 0;\n margin-bottom: 0;\n }\n }\n }\n}\n\n.usa-button-group__item {\n margin: units(0.5);\n\n &:last-child {\n @include at-media(\"mobile-lg\") {\n margin-right: 0;\n }\n }\n\n .usa-button {\n height: 100%;\n margin-left: 0;\n margin-right: 0;\n }\n}\n\n// Segmented styles\n.usa-button-group--segmented {\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: space-between;\n margin-left: 0;\n margin-right: 0;\n\n @include at-media(\"mobile-lg\") {\n justify-content: flex-start;\n }\n\n .usa-button {\n position: relative;\n width: calc(100% + #{units($theme-button-stroke-width)});\n\n @include at-media(\"mobile-lg\") {\n width: auto;\n }\n\n // Ensures edges are not cut off when interacting with outline buttons\n &:hover,\n &:active {\n z-index: 2;\n }\n\n &:focus {\n z-index: 3;\n }\n }\n\n .usa-button-group__item {\n margin-left: 0;\n margin-right: 0;\n width: 100%;\n\n @include at-media(\"mobile-lg\") {\n width: auto;\n }\n\n &:first-child > .usa-button {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n margin-right: -(math.div(units($theme-button-stroke-width), 2));\n }\n\n &:last-child > .usa-button {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n margin-right: 0;\n margin-left: -(units($theme-button-stroke-width));\n width: calc(100% + #{units($theme-button-stroke-width)});\n\n @include at-media(\"mobile-lg\") {\n margin-left: -(math.div(units($theme-button-stroke-width), 2));\n width: auto;\n }\n }\n\n &:where(:not(:first-child):not(:last-child)) > .usa-button {\n border-radius: 0;\n margin-right: -(math.div(units($theme-button-stroke-width), 2));\n margin-left: -(math.div(units($theme-button-stroke-width), 2));\n }\n\n // Creates separators\n &:where(:not(:last-child)) {\n .usa-button::before {\n border-right: 1px solid color(\"primary-dark\");\n bottom: 0;\n content: \"\";\n display: block;\n height: 100%;\n position: absolute;\n right: 1px;\n top: 0;\n width: 1px;\n z-index: 3;\n }\n\n .usa-button--secondary::before {\n border-right-color: color(\"secondary-dark\");\n }\n\n .usa-button--accent-cool::before {\n border-right-color: color(\"accent-cool-dark\");\n }\n\n .usa-button--base::before {\n border-right-color: color(\"base-dark\");\n }\n\n [class*=\"usa-button\"]:disabled::before,\n [class*=\"usa-button\"][aria-disabled=\"true\"]::before {\n border-right-color: color($theme-body-background-color);\n }\n\n .usa-button:active::before,\n .usa-button--outline::before {\n display: none;\n }\n }\n }\n}\n","@use \"uswds-core\" as *;\n\n// Buttons variables\n\n$button-context: \"Button\";\n$button-stroke: inset 0 0 0 units($theme-button-stroke-width);\n\n// Buttons\n.usa-button {\n @include border-box-sizing;\n @include typeset($theme-button-font-family, null, 1);\n @include set-text-and-bg(\"primary\", $context: $button-context);\n appearance: none;\n align-items: center;\n border: 0;\n border-radius: radius($theme-button-border-radius);\n cursor: pointer;\n column-gap: units($theme-button-icon-gap);\n display: inline-flex;\n font-weight: font-weight(\"bold\");\n justify-content: center;\n margin-right: units(1);\n padding: units(1.5) units(2.5);\n text-align: center;\n text-decoration: none;\n width: 100%;\n\n @include at-media(\"mobile-lg\") {\n width: auto;\n }\n\n &:visited {\n color: color(\"white\");\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"primary-dark\", $context: $button-context);\n border-bottom: 0;\n text-decoration: none;\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"primary-darker\", $context: $button-context);\n }\n\n &:not([disabled]):focus,\n &:not([disabled]).usa-focus {\n outline-offset: units(0.5);\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n @include button-disabled;\n }\n\n .usa-icon {\n flex-shrink: 0; // Avoid shrinking on small screens.\n }\n\n @media (forced-colors: active) {\n &:not(.usa-button--unstyled) {\n border: $border-high-contrast;\n }\n }\n}\n\n.usa-button--accent-cool {\n @include set-text-and-bg(\"accent-cool\", $context: $button-context);\n\n &:visited {\n @include set-text-and-bg(\"accent-cool\", $context: $button-context);\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"accent-cool-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"accent-cool-darker\", $context: $button-context);\n }\n}\n\n.usa-button--accent-warm {\n @include set-text-and-bg(\"accent-warm\", $context: $button-context);\n\n &:visited {\n @include set-text-and-bg(\"accent-warm\", $context: $button-context);\n }\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"accent-warm-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"accent-warm-darker\", $context: $button-context);\n }\n}\n\n.usa-button--outline {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary\");\n color: color(\"primary\");\n\n &:visited {\n color: color(\"primary\");\n }\n\n &:hover,\n &.usa-button--hover {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary-dark\");\n color: color(\"primary-dark\");\n }\n\n &:active,\n &.usa-button--active {\n background-color: color(\"transparent\");\n box-shadow: $button-stroke color(\"primary-darker\");\n color: color(\"primary-darker\");\n }\n\n &.usa-button--inverse {\n $button-inverse-color: $theme-link-reverse-color;\n $button-inverse-hover-color: $theme-link-reverse-hover-color;\n $button-inverse-active-color: $theme-link-reverse-active-color;\n\n box-shadow: $button-stroke color(\"base-lighter\");\n color: color($button-inverse-color);\n\n &:visited {\n color: color($button-inverse-color);\n }\n\n &:hover,\n &.usa-button--hover {\n box-shadow: $button-stroke color($button-inverse-hover-color);\n color: color($button-inverse-hover-color);\n }\n\n &:active,\n &.usa-button--active {\n background-color: transparent;\n box-shadow: $button-stroke color($button-inverse-active-color);\n color: color($button-inverse-active-color);\n }\n\n &.usa-button--unstyled {\n @include button-unstyled;\n color: color($button-inverse-color);\n\n &:visited {\n color: color($button-inverse-color);\n }\n\n &:hover,\n &.usa-button--hover {\n color: color($button-inverse-hover-color);\n }\n\n &:active,\n &.usa-button--active {\n color: color($button-inverse-active-color);\n }\n }\n }\n}\n\n.usa-button--base {\n @include set-text-and-bg(\"base\", $context: $button-context);\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"base-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"base-darker\", $context: $button-context);\n }\n}\n\n.usa-button--secondary {\n @include set-text-and-bg(\"secondary\", $context: $button-context);\n\n &:hover,\n &.usa-button--hover {\n @include set-text-and-bg(\"secondary-dark\", $context: $button-context);\n }\n\n &:active,\n &.usa-button--active {\n @include set-text-and-bg(\"secondary-darker\", $context: $button-context);\n }\n}\n\n.usa-button--big {\n border-radius: radius($theme-button-border-radius);\n font-size: font-size($theme-button-font-family, \"lg\");\n padding: units(2) units(3);\n}\n\n// Cannot use disabled mixin due to transparent causing build errors with color grade check.\n.usa-button--outline:disabled,\n.usa-button--outline[aria-disabled=\"true\"],\n.usa-button--outline-inverse:disabled,\n.usa-button--outline-inverse[aria-disabled=\"true\"] {\n &,\n &:hover,\n &:active,\n &:focus {\n background-color: transparent;\n color: color(\"disabled\");\n }\n}\n\n.usa-button--outline:disabled,\n.usa-button--outline[aria-disabled=\"true\"] {\n box-shadow: $button-stroke color(\"disabled-lighter\");\n\n &.usa-button--inverse {\n box-shadow: $button-stroke color(\"disabled-light\");\n color: color(\"disabled-light\");\n\n @media (forced-colors: active) {\n color: color(GrayText);\n }\n }\n}\n\n.usa-button--unstyled {\n @include button-unstyled;\n}\n","@use \"../../functions/utilities/color\" as *;\n@use \"../../settings\" as *;\n@use \"../../variables/border-high-contrast\" as *;\n@use \"../helpers/set-text-and-bg.scss\" as *;\n\n/// Adds compliant disabled colors and cursor styles to elements to read as disabled.\n/// Falls back to standard disabled tokens if params fail color contrast check.\n///\n/// @param {String} $bg-color - Desired background color token.\n/// @param {String} $text-color - Desired text color token.\n///\n/// @output Theme adjusted disabled styles.\n///\n/// @example scss\n/// .foo {\n/// @include u-disabled(\"disabled-darker\", \"white\");\n/// }\n@mixin u-disabled($bg-color: \"disabled-lighter\", $text-color: \"disabled-dark\") {\n @include set-text-and-bg($bg-color, $text-color);\n\n cursor: not-allowed;\n opacity: 1; // Override disabled default opacity shift (Necessary for Chromium, iOS Safari)\n\n &:hover,\n &:active,\n &:focus,\n &.usa-focus {\n @include set-text-and-bg($bg-color, $text-color);\n }\n\n @media (forced-colors: active) {\n border: 0;\n color: color(GrayText);\n\n &:hover,\n &:active,\n &:focus,\n &.usa-focus {\n color: color(GrayText);\n }\n }\n}\n\n/// Adds high contrast border using the GrayText system token.\n///\n/// @output Border size, style, and color.\n///\n/// @example scss\n/// .foo {\n/// @include u-disabled-high-contrast-border;\n/// }\n///\n@mixin u-disabled-high-contrast-border {\n @media (forced-colors: active) {\n border: $border-high-contrast-disabled;\n }\n}\n","@use \"../utilities\" as *;\n\n@mixin button-disabled {\n @include u-disabled;\n\n &.usa-button--hover,\n &.usa-button--active {\n @include u-disabled;\n }\n\n &:not(.usa-button--unstyled) {\n @include u-disabled-high-contrast-border;\n }\n}\n","@use \"sass:math\";\n\n@use \"uswds-core\" as *;\n\n/* TODO:\n * Add a way to change the flag breakpoint as a modifier/class?\n */\n\n@mixin card-inner-radius {\n border-top-left-radius: calc(\n #{radius($theme-card-border-radius)} - #{units($theme-card-border-width)}\n );\n border-top-right-radius: calc(\n #{radius($theme-card-border-radius)} - #{units($theme-card-border-width)}\n );\n}\n\n@include override-prose {\n .usa-card-group {\n @include add-list-reset;\n }\n}\n\n.usa-card-group {\n @include u-display(\"flex\");\n @include u-flex(\"column\", \"wrap\", \"align-stretch\");\n @include u-margin-x(math.div($theme-card-gap, -2));\n\n @include at-media($theme-card-flag-min-width) {\n @include u-flex(\"row\");\n }\n}\n\n@include override-prose {\n .usa-card {\n @include u-margin-bottom($theme-card-margin-bottom + 1);\n @include u-maxw(\"none\"); // override prose scope\n\n &:last-child {\n @include u-margin-bottom(\n $theme-card-margin-bottom + 1\n ); // override prose scope\n }\n\n @include at-media(\"tablet\") {\n @include u-margin-bottom($theme-card-margin-bottom);\n\n &:last-child {\n @include u-margin-bottom(\n $theme-card-margin-bottom\n ); // override prose scope\n }\n }\n }\n}\n\n.usa-card__container {\n @include border-box-sizing;\n @include set-text-and-bg(\"white\");\n @include typeset($theme-card-font-family);\n @include u-border($theme-card-border-width, $theme-card-border-color);\n @include u-display(\"flex\");\n @include u-height(\"full\");\n @include u-flex(\"column\");\n @include u-margin-x(math.div($theme-card-gap, 2));\n @include u-position(\"relative\");\n @include u-radius($theme-card-border-radius);\n}\n\n.usa-card:not(.usa-card--flag) .usa-card__container > :only-child {\n @include u-padding($theme-card-padding-perimeter);\n}\n\n.usa-card .usa-card__img {\n @include u-display(\"block\");\n}\n\n// Header\n// ---------------------------------\n.usa-card__header {\n @include u-padding-top($theme-card-padding-perimeter);\n @include u-padding-x($theme-card-padding-perimeter);\n padding-bottom: math.div(units($theme-card-padding-y), 2);\n\n &:last-child {\n @include u-padding-bottom($theme-card-padding-perimeter);\n }\n}\n\n.usa-card__heading {\n @include typeset($theme-card-header-typeset);\n @include u-margin(0);\n}\n\n// Media\n// ---------------------------------\n.usa-card__media {\n @include u-order(\"first\");\n // IE 11\n // http://github.com/philipwalton/flexbugs/issues/75\n min-height: 1px;\n}\n\n.usa-card__img {\n @include card-inner-radius;\n @include u-bg(\"base-lightest\");\n @include u-position(\"relative\");\n overflow: hidden;\n\n img {\n @include u-display(\"block\");\n @include u-height(\"full\");\n @include u-width(\"full\");\n object-fit: cover;\n }\n}\n\n.usa-card__media--inset {\n @include u-padding-top($theme-card-padding-perimeter);\n @include u-padding-x($theme-card-padding-perimeter);\n\n .usa-card__img {\n @include u-radius(0);\n }\n}\n\n// Body\n// ---------------------------------\n.usa-card__body {\n @include u-flex(\"fill\");\n @include u-padding-x($theme-card-padding-perimeter);\n padding-bottom: math.div(units($theme-card-padding-y), 2);\n padding-top: math.div(units($theme-card-padding-y), 2);\n // IE 11\n flex-basis: auto;\n\n // adjust spacing if body lack siblings\n &:last-child {\n @include u-padding-bottom($theme-card-padding-perimeter);\n }\n\n &:first-child {\n @include u-padding-top($theme-card-padding-perimeter);\n }\n\n &:only-child {\n @include u-padding-y($theme-card-padding-perimeter);\n }\n}\n\n// Footer\n// ---------------------------------\n.usa-card__footer {\n @include u-padding-bottom($theme-card-padding-perimeter);\n @include u-padding-x($theme-card-padding-perimeter);\n padding-top: math.div(units($theme-card-padding-y), 2);\n}\n\n.usa-card__footer .usa-button:only-of-type {\n @include u-margin-right(0);\n}\n\n.usa-card__header,\n.usa-card__body {\n // strip spacing from first and last content\n > :last-child {\n @include u-padding-bottom(0);\n @include u-margin-bottom(0);\n }\n\n > :first-child {\n @include u-margin-top(0);\n @include u-padding-top(0);\n }\n\n > :only-child {\n @include u-margin-y(0);\n @include u-padding-y(0);\n }\n}\n\n// ---------------------------------\n// Variations\n// ---------------------------------\n\n// Exdent\n.usa-card__header--exdent,\n.usa-card__media--exdent,\n.usa-card__body--exdent,\n.usa-card__footer--exdent {\n margin-inline: units($theme-card-border-width) * -1;\n}\n\n.usa-card__header--exdent,\n.usa-card__body--exdent,\n.usa-card__footer--exdent {\n > * {\n @include u-padding-x($theme-card-border-width);\n }\n}\n\n.usa-card__media--exdent {\n margin-top: units($theme-card-border-width) * -1;\n\n .usa-card__img {\n @include u-radius-top($theme-card-border-radius);\n }\n}\n\n// Header first\n// ---------------------------------\n.usa-card--header-first {\n .usa-card__header {\n @include card-inner-radius;\n @include u-padding-bottom($theme-card-padding-y);\n }\n\n .usa-card__header--exdent {\n @include u-radius-top($theme-card-border-radius);\n margin-top: units($theme-card-border-width) * -1;\n }\n\n .usa-card__media--inset {\n @include u-padding-top(0);\n }\n\n .usa-card__media {\n @include u-order(0);\n\n &--exdent {\n @include u-margin-top(0);\n }\n }\n\n .usa-card__img {\n @include u-radius(0);\n }\n\n .usa-card__body {\n @include u-padding-top($theme-card-padding-y);\n }\n}\n\n.usa-card--flag {\n @include at-media($theme-card-flag-min-width) {\n .usa-card__media {\n @include u-display(\"flex\");\n @include u-overflow(\"hidden\");\n @include u-pin-y;\n @include u-pin-left;\n @include u-position(\"absolute\");\n @include u-width($theme-card-flag-image-width);\n }\n\n .usa-card__img {\n @include u-radius(0);\n border-top-left-radius: calc(\n #{radius($theme-card-border-radius)} -\n #{units($theme-card-border-width)}\n );\n border-bottom-left-radius: calc(\n #{radius($theme-card-border-radius)} -\n #{units($theme-card-border-width)}\n );\n }\n\n .usa-card__header,\n .usa-card__body,\n .usa-card__footer {\n @include u-margin-left($theme-card-flag-image-width);\n }\n\n .usa-card__media--exdent {\n margin: units($theme-card-border-width) * -1;\n\n .usa-card__img {\n @include u-radius-left($theme-card-border-radius);\n }\n }\n\n .usa-card__media--inset {\n @include u-padding-right(0);\n @include u-padding-bottom($theme-card-padding-perimeter);\n\n .usa-card__img {\n @include u-radius(0);\n }\n }\n\n &.usa-card--header-first {\n .usa-card__header {\n padding-bottom: math.div(units($theme-card-padding-y), 2);\n }\n\n .usa-card__body {\n padding-top: math.div(units($theme-card-padding-y), 2);\n }\n\n .usa-card__media--inset {\n @include u-padding-top($theme-card-padding-perimeter);\n }\n }\n\n &.usa-card--media-right {\n .usa-card__media {\n @include u-left(\"auto\");\n @include u-right(0);\n }\n\n .usa-card__media--inset {\n @include u-padding-left(0);\n @include u-padding-right($theme-card-padding-perimeter);\n\n .usa-card__img {\n @include u-radius(0);\n }\n }\n\n .usa-card__img {\n @include u-radius(0);\n border-top-right-radius: calc(\n #{radius($theme-card-border-radius)} -\n #{units($theme-card-border-width)}\n );\n border-bottom-right-radius: calc(\n #{radius($theme-card-border-radius)} -\n #{units($theme-card-border-width)}\n );\n }\n\n .usa-card__header,\n .usa-card__body,\n .usa-card__footer {\n @include u-margin-left(0);\n @include u-margin-right($theme-card-flag-image-width);\n }\n\n .usa-card__img {\n @include u-radius(0);\n @include u-radius-right($theme-card-border-radius);\n }\n }\n }\n}\n\n.usa-card:not(.usa-card--flag).usa-card__media--set-aspect {\n @include add-aspect(\"16x9\");\n @include u-position(\"relative\");\n\n .usa-card__img {\n @include u-pin-all;\n }\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n@mixin add-list-reset($value...) {\n $important: null;\n @if list.length($value) > 0 and has-important($value) {\n $value: remove($value, \"!important\");\n $important: \" !important\";\n }\n margin-bottom: 0#{$important};\n margin-top: 0#{$important};\n list-style-type: none#{$important};\n padding-left: 0#{$important};\n}\n\n@mixin list-reset($value...) {\n @include add-list-reset($value...);\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n// Outputs order\n\n@mixin u-order($value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n order: get-uswds-value(\"order\", $value...) #{$important};\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n@mixin u-bg($value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n background-color: color($value) #{$important};\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n// Outputs border-radius\n\n@mixin u-radius($value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n border-radius: get-uswds-value(\"border-radius\", $value) #{$important};\n}\n\n@mixin u-radius-bottom($value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n border-bottom-left-radius: get-uswds-value(\"border-radius\", $value)\n #{$important};\n border-bottom-right-radius: get-uswds-value(\"border-radius\", $value)\n #{$important};\n}\n\n@mixin u-radius-left($value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n border-bottom-left-radius: get-uswds-value(\"border-radius\", $value)\n #{$important};\n border-top-left-radius: get-uswds-value(\"border-radius\", $value) #{$important};\n}\n\n@mixin u-radius-right($value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n border-bottom-right-radius: get-uswds-value(\"border-radius\", $value)\n #{$important};\n border-top-right-radius: get-uswds-value(\"border-radius\", $value)\n #{$important};\n}\n\n@mixin u-radius-top($value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n border-top-left-radius: get-uswds-value(\"border-radius\", $value) #{$important};\n border-top-right-radius: get-uswds-value(\"border-radius\", $value)\n #{$important};\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n// Outputs right\n\n@mixin u-left($value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n left: get-uswds-value(\"left\", $value...) #{$important};\n}\n","@use \"sass:list\";\n@use \"sass:map\";\n@use \"../../functions\" as *;\n@use \"../../variables\" as *;\n\n@mixin add-aspect-children {\n & > * {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n\n @at-root img#{&},\n & > img {\n object-fit: cover;\n }\n}\n\n@mixin add-aspect($ratio, $type: \"\") {\n $ratio: unpack($ratio);\n $important: null;\n\n @if has-important($ratio) {\n $ratio: list.nth($ratio, 1);\n $important: \"!important\";\n }\n\n @if map-has-key($project-aspect-ratios, $ratio) {\n box-sizing: border-box #{$important};\n height: 0 #{$important};\n overflow: hidden #{$important};\n padding-bottom: map.get($project-aspect-padding, $ratio) #{$important};\n position: relative;\n\n // Check for CSS aspect-ratio support\n @supports (aspect-ratio: 1) {\n //reset\n height: inherit #{$important};\n padding: inherit #{$important};\n // end reset\n aspect-ratio: map.get($project-aspect-ratios, $ratio);\n max-width: 100%;\n @include add-aspect-children;\n }\n } @else {\n @error '`#{$ratio}` is not a valid key in $project-aspect-ratios. Valid values: #{map.keys($project-aspect-ratios)}';\n }\n}\n","@use \"uswds-core\" as *;\n\n.usa-checklist {\n @include add-list-reset;\n @include border-box-sizing;\n @include typeset;\n}\n\n.usa-checklist__item {\n @include add-checkbox-placeholder;\n @include u-margin-y(0);\n margin-bottom: 0;\n margin-top: units(1);\n\n // Deprecate usa-checklist__item--checked once the js is updated\n &.usa-checklist__item--checked {\n @include add-success-mark;\n }\n}\n","@use \"../../functions\" as *;\n\n@mixin add-checkbox-placeholder {\n $placeholder-width: units(4);\n $placeholder-margin: units(1);\n\n text-indent: ($placeholder-width + $placeholder-margin) * -1;\n\n &::before {\n content: \" \";\n display: inline-block;\n height: units(2);\n margin-left: units(-0.5);\n margin-right: units(1.5);\n width: $placeholder-width;\n }\n}\n","@use \"./add-background-svg\" as *;\n@use \"../../functions\" as *;\n\n@mixin add-success-mark {\n &::before {\n @include add-background-svg(\"usa-icons-bg/check--blue-60v\");\n background-position: center;\n background-size: units(3);\n }\n}\n","@use \"uswds-core\" as *;\n\n$collection-thumb-width: 10;\n$collection-thumb-width-mobile: 8;\n$collection-thumb-margin: 2;\n\n@include override-prose {\n .usa-collection {\n @include typeset($theme-collection-font-family, \"sm\", 3);\n @include usa-list;\n @include u-padding-left(0);\n }\n\n .usa-collection__item {\n @include usa-list-item;\n @include unstyled-list;\n @include u-align-items(\"align-start\");\n @include u-border-top(1px);\n @include u-display(\"flex\");\n @include u-margin-y(2);\n @include u-padding-top(2);\n }\n}\n\n.usa-collection__img,\n.usa-collection__calendar-date {\n @include media-block-img;\n width: units($collection-thumb-width-mobile);\n margin-right: units($collection-thumb-margin);\n\n @include at-media(\"tablet\") {\n width: units($collection-thumb-width);\n }\n}\n\n.usa-collection__body {\n @include u-flex(1);\n}\n\n.usa-collection__heading {\n @include typeset($theme-collection-header-typeset);\n @include u-margin-bottom(0);\n @include u-margin-top(0);\n}\n\n.usa-collection__description {\n @include u-margin-y(1);\n}\n\n.usa-collection__meta {\n @include unstyled-list;\n @include u-margin-top(0.5);\n}\n\n.usa-collection__meta-item {\n @include u-margin-top(0.5);\n @include typeset(\"ui\", \"2xs\", 3);\n display: block;\n margin-right: units(1);\n\n &.usa-tag {\n @include u-bg(\"base-lighter\");\n @include u-line-height(\"ui\", 1);\n @include u-padding-y(0.5);\n @include u-text(\"ink\");\n display: inline-block;\n margin-top: units(0.5);\n\n &--new {\n @include u-bg(\"accent-warm-dark\");\n @include u-text(\"white\");\n }\n }\n}\n\n.usa-collection__calendar-date {\n text-decoration: none;\n}\n\n.usa-collection__calendar-date-month,\n.usa-collection__calendar-date-day {\n @include u-font(\"ui\", 6);\n display: block;\n font-weight: fw(\"bold\");\n padding: units(0.5);\n text-align: center;\n\n @include at-media(\"tablet\") {\n padding: units(1);\n }\n}\n\n.usa-collection__calendar-date-month {\n @include u-radius-top(\"sm\");\n background-color: color(\"primary\");\n color: color(\"white\");\n}\n\n.usa-collection__calendar-date-day {\n @include u-radius-bottom(\"sm\");\n border: 1px solid color(\"primary\");\n color: color(\"primary\");\n}\n\n.usa-collection--condensed {\n .usa-collection__item {\n @include u-margin-y(1);\n @include u-padding-top(1);\n }\n}\n","@use \"sass:list\";\n@use \"../../functions/general/unpack\" as *;\n@use \"../../functions/general/has-important\" as *;\n@use \"../../functions/output/get-uswds-value\" as *;\n\n// Outputs align-items\n\n@mixin u-align-items($value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n align-items: get-uswds-value(\"align-items\", $value) #{$important};\n}\n","@use \"../../functions\" as *;\n\n@mixin media-block-img($margin-right: units(1)) {\n flex-shrink: 0;\n margin-right: $margin-right;\n}\n","@use \"uswds-core\" as *;\n\n.usa-embed-container {\n iframe,\n object,\n embed {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n}\n\n.usa-embed-container {\n @include add-aspect(\"16x9\");\n max-width: 100%;\n}\n","@use \"uswds-core\" as *;\n\n// Map for high contrast mode icons\n$-chevron-icon-defaults: (\n \"color\": currentColor,\n \"svg-height\": 20,\n \"svg-width\": 20,\n \"height\": units(2.5),\n);\n\n$-chevron-next: map-merge(\n $-chevron-icon-defaults,\n (\n \"name\": \"navigate_next\",\n )\n);\n\n$-chevron-expand-more: map-merge(\n $-chevron-icon-defaults,\n (\n \"name\": \"expand_more\",\n )\n);\n\n// General footer styles\n.usa-footer {\n @include border-box-sizing;\n @include typeset($theme-footer-font-family);\n\n > .grid-container {\n @include grid-container($theme-footer-max-width);\n }\n}\n.usa-footer__return-to-top {\n @include u-padding-y(2.5);\n line-height: line-height($theme-footer-font-family, 1);\n\n a {\n @include typeset-link;\n }\n}\n\n.usa-footer__nav {\n @include grid-container($theme-footer-max-width);\n @include u-padding-x(0);\n border-bottom: 1px solid color(\"base-light\");\n\n @include at-media(\"mobile-lg\") {\n @include add-responsive-site-margins;\n border-bottom: none;\n }\n\n > ul {\n @include add-list-reset;\n }\n}\n\n.usa-footer__primary-section {\n background-color: color(\"base-lightest\");\n\n > .grid-container {\n @include grid-container($theme-footer-max-width);\n }\n}\n\n.usa-footer__primary-container {\n @include grid-container($theme-footer-max-width);\n @include u-padding-x(0);\n\n @include at-media(\"desktop\") {\n @include u-padding-x(4);\n }\n}\n\n.usa-footer__primary-content {\n line-height: line-height($theme-footer-font-family, 2);\n}\n\n.usa-footer__primary-link {\n @include u-padding-x($theme-site-margins-mobile-width);\n @include u-padding-y(2);\n @include u-text(\"ink\", \"bold\");\n // Border reset for button variants of footer primary links.\n border: 0;\n border-top: 1px solid color(\"base-light\");\n display: block;\n\n @include at-media(\"mobile-lg\") {\n @include u-padding-x(0);\n border: none;\n }\n\n // Disclosure button functionality happens at mobile widths\n &--button {\n @include place-icon($-chevron-expand-more, \"before\", 0.5);\n width: 100%;\n cursor: pointer;\n\n &:not([disabled]):focus {\n // Apply negative focus offset to ensure that entire focus ring is visible\n @include focus-outline(null, null, null, \"neg-05\");\n }\n\n // Arrow for collapsible content.\n &::before {\n @include u-square(2.5);\n align-items: center;\n background-size: contain;\n content: \"\";\n display: inline-flex;\n justify-content: center;\n margin-right: units(0.5);\n margin-left: units(-0.5);\n\n @media (forced-colors: active) {\n background-color: buttonText !important;\n }\n }\n\n & + .usa-list--unstyled {\n margin-top: units(1);\n margin-bottom: units(1);\n }\n\n &[aria-expanded=\"false\"] {\n @include place-icon($-chevron-next, \"before\", 0.5);\n\n // Hide submenu when button is not expanded\n & + .usa-list--unstyled {\n display: none;\n }\n }\n }\n}\n\n.usa-footer__secondary-link {\n line-height: line-height($theme-footer-font-family, 2);\n margin-left: units(2);\n padding: 0;\n\n a {\n @include typeset-link;\n }\n\n & + .usa-footer__secondary-link {\n padding-top: units(2);\n }\n\n @include at-media(\"mobile-lg\") {\n margin-left: 0;\n }\n}\n\n.usa-footer__contact-info {\n line-height: line-height($theme-footer-font-family, 2);\n\n a {\n @include u-text(\"ink\");\n }\n\n @include at-media(\"mobile-lg\") {\n @include u-flex(\"justify-end\");\n margin-top: units(1);\n }\n}\n\n.usa-sign-up {\n padding-bottom: units(4);\n padding-top: units(3);\n\n .usa-label,\n .usa-button {\n margin-top: units(1.5);\n }\n}\n\n.usa-sign-up__heading {\n @include h3;\n margin: 0;\n}\n\n.usa-footer__secondary-section {\n @include u-padding-y(2.5);\n @include set-text-and-bg(\"base-lighter\");\n\n > .grid-container {\n @include grid-container($theme-footer-max-width);\n\n > .grid-row {\n justify-content: space-between;\n }\n }\n\n a {\n color: color(\"ink\");\n }\n}\n\n.usa-footer__logo {\n @include u-margin-y(1);\n\n @include at-media(\"mobile-lg\") {\n @include u-margin-y(0);\n @include u-flex(\"align-center\");\n }\n}\n\n.usa-footer__logo-img {\n max-width: units(10);\n}\n\n.usa-footer__logo-heading {\n @include typeset($theme-footer-font-family, $theme-h3-font-size, 1);\n @include u-font-weight(\"bold\");\n @include u-margin-y(1);\n}\n\n.usa-footer__contact-links {\n margin-top: units(3);\n\n @include at-media(\"mobile-lg\") {\n margin-top: 0;\n text-align: right;\n }\n}\n\n.usa-footer__contact-heading {\n @include typeset(\n $theme-footer-font-family,\n $theme-h3-font-size,\n $theme-heading-line-height\n );\n @include u-font-weight(\"bold\");\n margin-top: 0;\n\n @include at-media(\"mobile-lg\") {\n @include u-margin-y(0.5);\n }\n}\n\n.usa-footer__social-links {\n line-height: line-height($theme-footer-font-family, 1);\n padding-bottom: units(1);\n\n a {\n text-decoration: none;\n }\n\n @include at-media(\"mobile-lg\") {\n @include u-flex(\"justify-end\");\n }\n}\n\n.usa-social-link {\n @include u-square($size-touch-target);\n background-color: color(\"black-transparent-10\");\n display: inline-block;\n padding: units(0.5);\n\n &:hover {\n background-color: color(\"white\");\n }\n\n @media (forced-colors: active) {\n background-color: lightgrey;\n forced-color-adjust: none;\n }\n}\n\n.usa-social-link__icon {\n display: block;\n height: auto;\n width: 100%;\n}\n\n.usa-footer__address {\n @include at-media(\"mobile-lg\") {\n @include u-flex(\"justify-end\");\n }\n}\n\n// Slim footer styles\n\n.usa-footer--slim {\n .usa-footer__nav {\n @include at-media(\"desktop\") {\n @include u-padding-x(0);\n }\n }\n\n .usa-footer__address {\n @include u-padding-x($theme-site-margins-mobile-width);\n @include u-padding-y(2);\n\n @include at-media(\"mobile-lg\") {\n @include u-padding(0);\n }\n }\n\n .usa-footer__logo {\n @include u-flex(\"align-center\");\n }\n\n .usa-footer__logo-img {\n max-width: units(6);\n }\n\n .usa-footer__contact-info {\n display: inline-block;\n\n @include at-media(\"mobile-lg\") {\n @include u-padding-y(2);\n margin-top: 0;\n }\n }\n}\n\n// Big footer styles\n\n.usa-footer--big {\n .usa-footer__nav {\n @include u-margin-x($theme-site-margins-mobile-width * -1);\n @include at-media(\"mobile-lg\") {\n border-bottom: 1px solid color(\"base-light\");\n padding-top: units(4);\n }\n @include at-media(\"tablet\") {\n @include u-margin-x(0);\n @include u-padding-x(0);\n border-bottom: none;\n }\n }\n\n .usa-footer__primary-link {\n @include h4;\n line-height: line-height(\"heading\", 2);\n margin: 0;\n\n @include at-media(\"mobile-lg\") {\n @include u-padding-y(0);\n margin-bottom: units(1);\n\n &:hover {\n cursor: auto;\n text-decoration: none;\n }\n }\n }\n\n .usa-footer__primary-content--collapsible {\n .usa-footer__primary-link {\n align-items: center;\n display: flex;\n justify-content: flex-start;\n }\n\n .usa-list--unstyled {\n @include u-padding-x($theme-site-margins-mobile-width);\n padding-bottom: units(2.5);\n\n @include at-media(\"mobile-lg\") {\n @include u-padding-x(0);\n padding-bottom: units(4);\n padding-top: units(1.5);\n }\n }\n }\n}\n","@use \"sass:list\";\n@use \"../../functions\" as *;\n\n// Outputs line-height\n\n@mixin u-font-weight($value...) {\n $value: unpack($value);\n $important: null;\n @if has-important($value) {\n $value: remove($value, \"!important\");\n @if list.length($value) == 1 {\n $value: de-list($value);\n }\n $important: \" !important\";\n }\n font-weight: get-uswds-value(\"font-weight\", $value...) #{$important};\n}\n","@use \"uswds-core\" as *;\n\n.usa-form {\n @include typeset(\n $theme-form-font-family,\n $theme-body-font-size,\n $theme-input-line-height\n );\n @include border-box-sizing;\n\n @include at-media(\"mobile-lg\") {\n max-width: units(\"mobile\");\n }\n\n // Don't show dotted underline with \"required\" asterisk because it can cause legibility issues ad appear as an ellipsis...\n abbr[title=\"required\"] {\n text-decoration: none;\n }\n\n // Clear max-width in children since .usa-form has one of its own.\n // Used :where() to reduce specificity and\n // prevent usa-form styles from overriding `usa-input--[width] and `usa-input-group--[width]` classes.\n :where(.usa-input, .usa-textarea, .usa-select, .usa-range) {\n max-width: none;\n }\n\n .usa-button {\n margin-top: units(1);\n\n @include at-media(\"mobile-lg\") {\n margin-top: units(3);\n }\n }\n\n // Avoids links styled as buttons\n a:where(:not(.usa-button)) {\n @include typeset-link;\n }\n}\n\n.usa-form--large {\n @include at-media(\"mobile-lg\") {\n max-width: units(\"mobile-lg\");\n }\n}\n\n.usa-show-password {\n @include button-unstyled;\n cursor: pointer;\n}\n\n.usa-form__note,\n.usa-show-password {\n @include typeset($theme-form-font-family, \"2xs\", 3);\n float: right;\n margin: units(0.5) 0 units(2);\n}\n","@use \"uswds-core\" as *;\n\n// A collection of media block objects\n\n.usa-graphic-list {\n @include typeset;\n @include border-box-sizing;\n\n .usa-graphic-list__row {\n .usa-media-block {\n margin-bottom: units(4);\n\n @include at-media(\"tablet\") {\n margin-bottom: units(8);\n }\n }\n\n &:last-child {\n .usa-media-block {\n @include at-media(\"tablet\") {\n margin-bottom: 0;\n }\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n }\n\n .usa-media-block__img {\n margin-right: units(3);\n }\n\n .usa-media-block__body {\n > :first-child {\n margin-top: 0;\n }\n }\n}\n\n.usa-graphic-list__heading {\n @include typeset-h3;\n}\n","@use \"uswds-core\" as *;\n\n// Header helpers\n// ---------------------------------\n\n@mixin nav-border-extended {\n @include add-bar(0.5, \"primary\", \"bottom\", 0, 2);\n}\n\n@mixin nav-border-basic {\n @include add-bar(0.5, \"primary\", \"bottom\", 0, 2, -0.5);\n}\n\n$z-index-header: 300;\n$z-index-overlay: 400;\n\n// Header\n// ---------------------------------\n\n.usa-header {\n @include clearfix;\n @include typeset($theme-header-font-family);\n @include border-box-sizing;\n\n a {\n border-bottom: none;\n }\n\n // The search