with search role\n [role=\"search\"] {\n @include at-media($theme-header-min-width) {\n float: right;\n max-width: calc(\n #{$theme-search-min-width} + #{units($theme-button-small-width)}\n );\n width: 100%;\n }\n }\n\n // The search
\n [type=\"search\"] {\n min-width: 0; // Fix a Firefox display quirk\n }\n\n + .usa-hero {\n @include at-media($theme-header-min-width) {\n border-top: units(1px) solid color(\"white\");\n }\n }\n\n + .usa-section,\n + main {\n @include at-media($theme-header-min-width) {\n border-top: units(1px) solid color(\"base-lighter\");\n }\n }\n}\n\n.usa-logo {\n @include at-media-max($theme-header-min-width) {\n @include u-flex(\"fill\");\n font-size: font-size($theme-header-font-family, \"2xs\");\n line-height: line-height($theme-header-font-family, 1);\n margin-left: units($theme-site-margins-mobile-width);\n }\n\n @include at-media($theme-header-min-width) {\n margin-top: units(4);\n margin-bottom: units(2);\n font-size: font-size($theme-header-font-family, \"lg\");\n line-height: line-height($theme-header-font-family, 2);\n }\n\n a {\n color: color(\"ink\");\n text-decoration: none;\n }\n}\n\n.usa-logo__text {\n display: block;\n font-style: normal;\n font-weight: font-weight(\"bold\");\n margin: 0;\n}\n\n.usa-menu-btn {\n @include button-unstyled;\n @include u-flex(\"auto\");\n @include u-padding-x(1.5);\n background-color: color(\"primary\");\n color: color(\"white\");\n font-size: font-size($theme-header-font-family, \"3xs\");\n height: units($size-touch-target);\n text-align: center;\n text-decoration: none;\n text-transform: uppercase;\n\n @include at-media($theme-header-min-width) {\n display: none;\n }\n\n &:hover {\n background-color: color(\"primary-dark\");\n color: color(\"white\");\n text-decoration: none;\n }\n\n &:active {\n color: color(\"white\");\n }\n\n &:visited {\n color: color(\"white\");\n }\n}\n\n.usa-overlay {\n @include u-pin(\"all\");\n position: fixed;\n background: color(\"black-transparent-70\");\n opacity: opacity(0);\n transition: opacity $project-easing;\n visibility: hidden;\n z-index: z-index($z-index-overlay);\n\n &.is-visible {\n opacity: opacity(100);\n visibility: visible;\n }\n}\n\n// usa-header--basic\n// ---------------------------------\n\n.usa-header--basic {\n @include at-media($theme-header-min-width) {\n .usa-navbar {\n position: relative;\n width: $theme-header-logo-text-width; // TODO: review this more\n }\n\n .usa-nav {\n @include u-flex(\"row\", \"align-center\", \"justify-end\");\n display: flex;\n padding: 0 0 units(0.5) units(1);\n width: 100%;\n }\n\n .usa-nav-container {\n @include u-flex(\"align-end\", \"justify\");\n display: flex;\n }\n\n .usa-nav__primary-item > .usa-current,\n .usa-nav__link:hover {\n @include nav-border-basic;\n }\n\n // Don't show extended border if dropdown is active.\n .usa-nav__link[aria-expanded=\"true\"]::after,\n .usa-nav__link[aria-expanded=\"true\"]:hover::after {\n display: none;\n }\n\n .usa-nav__primary {\n width: auto;\n }\n\n // Issue #3401: last dropdown gets cutoff.\n .usa-nav__primary-item:last-of-type {\n position: relative;\n\n .usa-nav__submenu {\n @include u-pin-right;\n }\n }\n\n .usa-search {\n top: 0;\n }\n }\n\n &.usa-header--megamenu {\n .usa-nav__inner {\n display: flex;\n flex-direction: column;\n\n @include at-media($theme-header-min-width) {\n display: block;\n float: right;\n margin-top: units(-5);\n }\n }\n\n .usa-nav__primary-item:last-of-type {\n @include at-media($theme-header-min-width) {\n position: static;\n }\n }\n }\n}\n\n// usa-header--extended\n// ---------------------------------\n\n.usa-header--extended {\n @include at-media($theme-header-min-width) {\n padding-top: 0;\n\n .usa-nav__primary-item > .usa-current,\n .usa-nav__primary-item > .usa-nav__link:hover {\n @include nav-border-extended;\n }\n\n // Don't show extended border if dropdown is active.\n .usa-nav__link[aria-expanded=\"true\"]::after,\n .usa-nav__link[aria-expanded=\"true\"]:hover::after {\n display: none;\n }\n }\n\n .usa-logo {\n @include at-media($theme-header-min-width) {\n font-size: font-size($theme-header-font-family, \"xl\");\n margin: units(4) 0 units(3);\n max-width: $theme-header-logo-text-width;\n }\n }\n\n .usa-navbar {\n @include at-media($theme-header-min-width) {\n @include grid-container($theme-header-max-width);\n display: block;\n height: auto;\n overflow: auto;\n }\n }\n\n .usa-nav {\n @include at-media($theme-header-min-width) {\n border-top: units(1px) solid color(\"base-lighter\");\n padding: 0;\n width: 100%;\n }\n }\n\n .usa-nav__inner {\n @include at-media($theme-header-min-width) {\n @include grid-container($theme-header-max-width);\n position: relative;\n }\n }\n\n .usa-nav__primary {\n @include at-media($theme-header-min-width) {\n @include clearfix;\n margin-left: units(-2);\n }\n }\n\n .usa-nav__link {\n @include at-media($theme-header-min-width) {\n @include u-padding-y(2);\n }\n }\n\n .usa-nav__submenu {\n .usa-grid-full {\n @include at-media($theme-header-min-width) {\n padding-left: units(1.5);\n }\n }\n }\n\n .usa-nav__submenu.usa-megamenu {\n @include at-media($theme-header-min-width) {\n left: 0;\n padding-left: units($theme-site-margins-width);\n }\n }\n}\n\n// [uswds-init.js] Offscreen content while js is loading\nhtml.usa-js-loading {\n .usa-nav__submenu,\n .usa-nav__submenu.usa-megamenu {\n @include add-sr-only;\n }\n}\n","@mixin clearfix {\n &::after {\n clear: both;\n content: \"\";\n display: block;\n }\n}\n","@use \"../../functions\" as *;\n\n@mixin add-bar(\n $weight: 1,\n $color: \"ink\",\n $side: \"left\",\n $radius: 0,\n $offset-x: 0,\n $offset-y: 0\n) {\n $weight: if($weight == null, 1, $weight);\n $color: if($color == null, \"ink\", $color);\n $side: if($side == null, \"left\", $side);\n $radius: if($radius == null, 0, $radius);\n $offset-x: if($offset-x == null, 0, $offset-x);\n $offset-y: if($offset-y == null, 0, $offset-y);\n\n position: relative;\n\n &::after {\n background-color: color($color);\n border-radius: radius($radius);\n content: \"\";\n display: block;\n position: absolute;\n\n @if $side == (\"left\" or \"right\") {\n bottom: units($offset-y);\n top: units($offset-y);\n width: units($weight);\n #{unquote($side)}: units($offset-x);\n } @else {\n height: units($weight);\n left: units($offset-x);\n right: units($offset-x);\n #{unquote($side)}: units($offset-y);\n\n @media (forced-colors: active) {\n background-color: ButtonText;\n }\n }\n }\n}\n\n@mixin remove-bar {\n &::after {\n display: none;\n }\n}\n","@use \"sass:math\";\n@use \"sass:meta\";\n@use \"uswds-core\" as *;\n\n// Calculate the width of the outer megamenu pseudo elements\n@mixin outer-megamenu($header-max-width: $theme-header-max-width, $type) {\n @include u-pin(\"y\");\n background-color: color(\"primary-darker\");\n content: \"\";\n display: block;\n position: absolute;\n\n // Set variable for submenu max width\n $mw: smart-quote($header-max-width);\n @if meta.type-of($header-max-width) == \"string\" {\n // Retrieve the unit equivalent for submenu max width\n $mw: units($header-max-width);\n }\n\n // Create the vw equivalent for max-width:none\n @if $header-max-width == \"none\" {\n $mw: 100vw;\n }\n\n // Calculate pseudo element width\n // Subtract half the submenu width from half the viewport width\n @if $type == \"standard\" {\n // Add theme margin width to match padding in .usa-nav-container\n width: calc(50vw - $mw / 2 + units($theme-site-margins-width));\n } @else if $type == \"extended\" {\n width: calc(50vw - $mw / 2);\n }\n}\n\n.usa-megamenu {\n .usa-col {\n // Flex grow to take up available width.\n // Flex shrink so long nav lines don't extend beyond viewport.\n // Finally `flex-basis: auto` for IE11.\n flex: 1 1 auto;\n\n @include at-media($theme-header-min-width) {\n // needs this round() to avoid a compile bug\n @include u-flex(math.round(math.div(12, $theme-megamenu-columns)));\n }\n }\n}\n\n.usa-megamenu.usa-nav__submenu {\n @include at-media($theme-header-min-width) {\n @include u-padding-x(0);\n @include u-padding-y(4);\n left: -$theme-header-logo-text-width;\n right: 0;\n width: auto;\n }\n\n &::before {\n @include at-media($theme-header-min-width) {\n @include outer-megamenu($type: \"standard\");\n right: 100%;\n }\n }\n\n &::after {\n @include at-media($theme-header-min-width) {\n @include outer-megamenu($type: \"standard\");\n left: 100%;\n }\n }\n}\n\n.usa-header--extended .usa-megamenu.usa-nav__submenu {\n &::before {\n @include at-media($theme-header-min-width) {\n @include outer-megamenu($type: \"extended\");\n }\n }\n\n &::after {\n @include at-media($theme-header-min-width) {\n @include outer-megamenu($type: \"extended\");\n }\n }\n}\n","@use \"uswds-core\" as *;\n\n.usa-nav-container {\n @include at-media($theme-header-min-width) {\n @include clearfix;\n @include grid-container($theme-header-max-width);\n @include u-padding-x($theme-site-margins-width);\n }\n}\n","@use \"uswds-core\" as *;\n\n.usa-navbar {\n @include border-box-sizing;\n height: units($size-touch-target);\n\n @include at-media-max($theme-header-min-width) {\n @include u-flex(\"align-center\");\n border-bottom: units(1px) solid color(\"base-lighter\");\n display: flex;\n }\n\n @include at-media($theme-header-min-width) {\n border-bottom: none;\n display: inline-block;\n height: auto;\n }\n}\n","@use \"uswds-core\" as *;\n\n// Hero feature\n// ==========================\n\n.usa-hero {\n @include border-box-sizing;\n @include typeset;\n background-image: url(\"#{$theme-hero-image}\");\n background-position: center;\n background-size: cover;\n color: color(\"white\");\n\n > .grid-container {\n position: relative;\n @include u-padding-y($theme-site-margins-width);\n }\n}\n\n.usa-hero__callout {\n background-color: color(\"primary-darker\");\n padding: units(4);\n\n @include at-media(\"tablet\") {\n max-width: units(\"mobile\");\n }\n}\n\n.usa-hero__heading {\n @include typeset-h2;\n color: color(\"accent-cool\");\n line-height: line-height(\"heading\", 2);\n}\n\n.usa-hero__heading--alt {\n color: color(\"white\");\n display: block;\n}\n","@use \"sass:map\";\n\n@use \"uswds-core\" as *;\n\n// Variables\n\n// Size icons based on the theme-type-scale-[size] number and this factor\n$icon-list-icon-size-factor: 1.5;\n// Center the icon to the title text, works for all size variants\n$icon-list-icon-margin-top: -1.5%;\n// Fine tune the space between the icon and content with this factor\n$icon-list-icon-padding-left-factor: 0.4;\n// Fine tune the title top padding given a line height of lh-2\n$icon-list-title-padding-top: 0.425ex;\n\n$theme-body-font-sizes: (\n \"xs\": $theme-type-scale-xs,\n \"sm\": $theme-type-scale-sm,\n \"md\": $theme-type-scale-md,\n \"lg\": $theme-type-scale-lg,\n \"xl\": $theme-type-scale-xl,\n \"2xl\": $theme-type-scale-2xl,\n \"3xl\": $theme-type-scale-3xl,\n);\n\n$type-scale: font-size($theme-icon-list-font-family, $theme-body-font-size);\n\n// Get fixed size for icon, based on non-normalized size token\n$this-system-token: if(\n map.has-key($theme-body-font-sizes, $theme-body-font-size),\n map.get($theme-body-font-sizes, $theme-body-font-size),\n $theme-body-font-size\n);\n$this-icon-size-px: map.get($system-type-scale, $this-system-token);\n$icon-size: px-to-rem($this-icon-size-px);\n\n@include override-prose {\n .usa-icon-list {\n @include typeset($theme-icon-list-font-family, $theme-body-font-size);\n @include unstyled-list;\n @include u-measure(5);\n }\n\n .usa-icon-list__item {\n display: flex;\n position: relative;\n\n & + .usa-icon-list__item {\n padding-top: units(1.5);\n }\n }\n}\n\n// Allow setting icon color on the icon-list element\n.usa-icon-list {\n @each $color, $grades in $all-project-colors {\n @each $grade, $value in $grades {\n @if $value {\n $prefix: if($grade != \"default\", \"#{$color}-#{$grade}\", $color);\n &--#{$prefix} {\n .usa-icon-list__icon {\n color: color($prefix);\n }\n }\n }\n }\n }\n}\n\n.usa-icon-list__icon {\n .usa-icon {\n // Set the height and width of the icon based on the size variant and factor\n // Doesn't use u-square() because of non-token size\n display: block;\n height: $icon-size * $icon-list-icon-size-factor;\n // margin-top: $icon-list-icon-margin-top;\n position: relative;\n width: $icon-size * $icon-list-icon-size-factor;\n }\n}\n\n// Don't resize any block-level element inside content\n.usa-icon-list__content {\n > p,\n > ul,\n > ol {\n @include u-font($theme-icon-list-font-family, $theme-body-font-size);\n @include u-measure(5);\n }\n}\n\n.usa-icon-list[class*=\"usa-icon-list--size-\"] {\n @include u-measure(\"none\");\n}\n\n// Generate responsive variants\n// Create a map for looping that includes a default or no-breakpoint version\n$this-null: (\n \"none\": null,\n);\n$icon-list-breakpoints: map-merge($this-null, $system-breakpoints);\n@each $mq-key, $mq-value in $icon-list-breakpoints {\n // Set the prefix\n // An empty string if \"none\"\n $prefix: false;\n @if $mq-key == \"none\" {\n $prefix: \"\";\n }\n // Or the standard prefix if the breakpoint is output\n @else if map.get($theme-utility-breakpoints-complete, $mq-key) {\n $prefix: \"#{$mq-key}#{$separator}\";\n }\n\n @include at-media($mq-key) {\n @each $token, $val in $theme-body-font-sizes {\n @if $prefix {\n $this-type-scale: font-size($theme-icon-list-font-family, $token);\n .#{$prefix}usa-icon-list--size-#{$token} {\n .usa-icon-list__icon {\n .usa-icon {\n // Set the height and width of the icon based on the size variant and factor\n height: $this-type-scale * $icon-list-icon-size-factor;\n width: $this-type-scale * $icon-list-icon-size-factor;\n }\n }\n\n .usa-icon-list__content {\n @include u-measure(5);\n // Resize simple (un-marked up) content\n font-size: size($theme-icon-list-font-family, $token);\n // Calculate the space between the icon and content based on the size variant and factor\n padding-left: $this-type-scale *\n $icon-list-icon-padding-left-factor;\n\n .usa-icon-list__title {\n @include u-font($theme-icon-list-title-font-family, $token);\n }\n }\n }\n }\n }\n }\n}\n\n.usa-icon-list__title {\n @include typeset(\n $theme-icon-list-title-font-family,\n $theme-body-font-size,\n 2\n );\n margin-bottom: units(0);\n padding-top: $icon-list-title-padding-top;\n & + * {\n margin-top: units(1);\n }\n}\n\n.usa-icon-list__content {\n font-size: $type-scale;\n padding-left: $type-scale * $icon-list-icon-padding-left-factor;\n > *:first-child {\n margin-top: 0;\n }\n > *:last-child {\n margin-bottom: 0;\n }\n\n ul li {\n list-style-type: disc;\n }\n}\n","@use \"uswds-core\" as *;\n\n$identifier-context: \"Identifier\";\n$identifier-logo-height: 6;\n$identifier-section-margin-y: 2;\n$identifier-section-margin-y-small: 1;\n$identifier-link-gap: 1.5;\n$identifier-link-gap-desktop: 1;\n$identifier-links-gap: 4 !default;\n\n@mixin identifier-primary-link {\n @include set-link-from-bg(\n $theme-identifier-background-color,\n $theme-identifier-primary-link-color,\n $context: $identifier-context\n );\n}\n\n@mixin identifier-secondary-link {\n @include set-link-from-bg(\n $theme-identifier-background-color,\n $theme-identifier-secondary-link-color,\n $context: $identifier-context\n );\n}\n\n//\n// General Styles\n// =====================================\n.usa-identifier {\n @include typeset($theme-identifier-font-family, \"sm\", 3);\n @include set-text-and-bg(\n $theme-identifier-background-color,\n $context: $identifier-context\n );\n padding-bottom: units(2);\n}\n\n.usa-identifier__container {\n @include grid-container;\n @include u-maxw($theme-identifier-max-width);\n}\n\n.usa-identifier__section {\n @include u-padding-y($identifier-section-margin-y);\n}\n\n.usa-identifier__section--masthead {\n .usa-identifier__container {\n @include at-media(\"tablet\") {\n @include u-align-items(\"align-center\");\n @include u-display(\"flex\");\n }\n }\n}\n\n.usa-identifier__logos {\n display: flex;\n margin-right: units(2);\n}\n\n.usa-identifier__logo {\n @include u-text-decoration(\"no-underline\");\n height: units($identifier-logo-height);\n display: block;\n\n & + .usa-identifier__logo {\n margin-left: units(1);\n }\n}\n\n.usa-identifier__logo-img {\n height: 100%;\n width: auto;\n}\n\n.usa-identifier__identity {\n @include u-flex(\"fill\");\n margin-top: units(2);\n\n @include at-media(\"tablet\") {\n margin-top: units(0);\n }\n}\n\n.usa-identifier__identity-domain,\n.usa-identifier__identity-disclaimer {\n margin: 0;\n padding: 0;\n}\n\n.usa-identifier__identity-domain {\n @include set-text-from-bg(\n $theme-identifier-background-color,\n $theme-identifier-identity-domain-color,\n $context: $identifier-context\n );\n}\n\n.usa-identifier__identity-disclaimer {\n @include u-text(\"bold\");\n\n a {\n @include identifier-primary-link;\n }\n}\n\n.usa-identifier__section--required-links {\n @include at-media(\"tablet\") {\n @include u-padding-y($identifier-section-margin-y-small);\n }\n @include at-media(\"desktop\") {\n @include u-font-size($theme-identifier-font-family, \"xs\");\n }\n}\n\n.usa-identifier__required-links-list {\n @include add-list-reset;\n @include u-margin-y(0);\n\n @include at-media(\"tablet\") {\n column-count: 2;\n column-gap: units($identifier-links-gap);\n column-fill: balance;\n }\n\n @include at-media(\"desktop\") {\n column-count: 4;\n }\n}\n\n.usa-identifier__required-links-item {\n break-inside: avoid;\n margin-bottom: units($identifier-link-gap);\n\n &:last-child {\n margin-bottom: units(0);\n }\n\n @include at-media(\"desktop\") {\n margin-bottom: units($identifier-link-gap-desktop);\n }\n}\n\n.usa-identifier__required-link,\n.usa-identifier__required-link.usa-link {\n @include identifier-secondary-link;\n display: inline-block;\n}\n\n.usa-identifier__section--usagov a {\n @include identifier-primary-link;\n @include u-text(\"bold\");\n display: inline-block;\n margin-top: units(1);\n\n @include at-media(\"tablet\") {\n margin-top: 0;\n }\n}\n\n.usa-identifier__usagov-description {\n @include at-media(\"tablet\") {\n display: inline-flex;\n }\n}\n","@use \"sass:list\";\n@use \"sass:map\";\n@use \"../../functions\" as *;\n@use \"../../tokens\" as *;\n\n// Outputs text-decoration and color properties\n\n@mixin u-text-decoration($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 @if map.has-key($all-color-shortcodes, smart-quote($this-value)) {\n text-decoration-color: color(smart-quote($this-value)) #{$important};\n } @else {\n text-decoration: get-uswds-value(\"text-decoration\", $value...)\n #{$important};\n }\n }\n}\n","@use \"uswds-core\" as *;\n@use \"sass:color\";\n@use \"sass:list\";\n\n.usa-in-page-nav-container {\n align-items: flex-start;\n display: flex;\n\n // Set main landmark max width to ensure in-page nav will fit\n main {\n max-width: units($theme-in-page-nav-main-content-max-width);\n width: 100%;\n }\n}\n\n.usa-in-page-nav {\n @include set-text-from-bg(\n $bg-color: $theme-in-page-nav-background-color,\n $context: \"In-page navigation text color\"\n );\n display: none;\n margin-left: units($theme-in-page-nav-margin-left);\n margin-top: units($theme-in-page-nav-margin-top);\n max-width: units(\"card-lg\");\n order: 2;\n position: sticky;\n top: units($theme-in-page-nav-top);\n width: 100%;\n\n @include at-media(\"tablet\") {\n display: block;\n }\n}\n\n.usa-in-page-nav__nav {\n @include set-text-and-bg(\n $theme-in-page-nav-background-color,\n $context: \"In-page navigation background\"\n );\n border-radius: radius($theme-in-page-nav-background-radius);\n padding: units($theme-in-page-nav-background-padding);\n}\n\n.usa-in-page-nav__heading {\n // TODO: This could be a setting?\n @include typeset(\"ui\", \"2xs\", 3);\n @include u-font-weight(\"bold\");\n margin-bottom: units(2);\n margin-top: 0;\n padding: 0;\n}\n\n.usa-in-page-nav__list {\n @include border-box-sizing;\n @include nav-list(\"sidenav\");\n border-left: units(1px) solid\n color.adjust(\n color(\n get-color-token-from-bg(\n $bg-color: $theme-in-page-nav-background-color,\n $context: \"In-page navigation rail\"\n )\n ),\n $alpha: -0.75\n );\n padding: 0;\n\n // specificity to override sidenav styles\n a:not(.usa-button) {\n &:not(.usa-current) {\n @include set-link-from-bg(\n $bg-color: $theme-in-page-nav-background-color,\n $preferred-link-color: $theme-in-page-nav-link-color,\n $context: \"In-page-navigation link\"\n );\n\n &:visited {\n color: color(\n list.nth(\n get-link-tokens-from-bg(\n $bg-color: $theme-in-page-nav-background-color,\n $preferred-link-token: $theme-in-page-nav-link-color,\n $context: \"In-page-navigation link\"\n ),\n 1\n )\n );\n }\n }\n\n &.usa-current {\n @include set-text-from-bg(\n $bg-color: $theme-in-page-nav-background-color,\n $context: \"In-page-navigation current color\"\n );\n font-weight: inherit;\n }\n\n &:hover {\n text-decoration: underline;\n background-color: none;\n }\n\n &.usa-current {\n position: static;\n\n &::after {\n background-color: color(\n get-color-token-from-bg(\n $bg-color: $theme-in-page-nav-background-color,\n $preferred-text-token: $theme-in-page-nav-bar-color,\n $context: \"In-page navigation bar\"\n )\n );\n border-radius: 0;\n bottom: units(-1px);\n left: 0;\n top: 0;\n width: units($theme-in-page-nav-bar-width);\n z-index: z(100);\n }\n }\n }\n}\n\n.usa-in-page-nav__item {\n @include typeset($theme-in-page-nav-font-family, \"2xs\", 2);\n border: none;\n font-weight: bold;\n position: relative;\n\n &.usa-in-page-nav__item--sub-item {\n font-weight: normal;\n }\n}\n","@use \"./add-bar\" as *;\n@use \"../../functions\" as *;\n@use \"../../mixins/helpers\" as *;\n@use \"../../mixins/typography/unstyled-list\" as *;\n@use \"../../mixins/utilities\" as *;\n@use \"../../settings\" as *;\n\n$sidenav-level-1-inset: 2;\n$sidenav-level-2-inset: 4;\n$sidenav-level-3-inset: 6;\n$sidenav-level-4-inset: 8;\n\n@mixin nav-list($type) {\n @include unstyled-list();\n\n @if $type == \"sidenav\" {\n &__item {\n border-top: units(1px) solid color(\"base-lighter\");\n }\n }\n\n @if $type == \"nav\" {\n &-item {\n border-top: units(1px) solid color(\"base-lighter\");\n }\n }\n\n a:not(.usa-button) {\n display: block;\n padding: units(1) units($sidenav-level-1-inset);\n text-decoration: none;\n\n &:hover {\n background-color: color(\"base-lightest\");\n text-decoration: none;\n }\n }\n\n a:not(.usa-button):not(.usa-current) {\n color: color(\"base-dark\");\n\n &:hover {\n color: color($theme-link-color);\n }\n\n &:focus {\n outline-offset: 0;\n }\n }\n\n .usa-current {\n @include add-bar(\n $theme-sidenav-current-border-width,\n \"primary\",\n \"left\",\n \"pill\",\n 0.5,\n 0.5\n );\n color: color($theme-link-color);\n font-weight: font-weight(\"bold\");\n\n @include at-media(\"tablet\") {\n @include add-bar(\n $theme-sidenav-current-border-width,\n $theme-link-color,\n \"left\",\n \"pill\",\n 0,\n 0.5\n );\n }\n }\n}\n\n@mixin nav-sublist {\n @include unstyled-list();\n margin: 0;\n\n &-item {\n border-top: units(1px) solid color(\"base-lighter\");\n font-size: font-size($theme-sidenav-font-family, \"2xs\");\n }\n\n .usa-current {\n @include remove-bar;\n\n @include at-media(\"tablet\") {\n @include remove-bar;\n }\n }\n\n // level 2+\n a:not(.usa-button) {\n padding-left: units($sidenav-level-2-inset);\n }\n\n // level 3+\n & & a:not(.usa-button) {\n padding-left: units($sidenav-level-3-inset);\n }\n\n // level 4+\n & & & a:not(.usa-button) {\n padding-left: units($sidenav-level-4-inset);\n }\n}\n","@use \"uswds-core\" as *;\n\n.usa-language {\n @include u-flex(\"row\", \"align-center\", \"justify-end\");\n display: flex;\n padding: 0 0 units(0.5) units(1);\n width: 100%;\n\n &--small {\n .usa-button {\n @include u-padding-x(1.5);\n @include u-padding-y(0);\n font-size: font-size($theme-header-font-family, \"3xs\");\n height: units(4);\n margin-top: 0.3rem;\n min-width: units($theme-button-small-width);\n }\n }\n}\n\n.usa-language-container {\n @include u-flex(\"align-center\", \"justify-end\");\n display: flex;\n}\n\n.usa-nav-container {\n .usa-language-container {\n align-self: center;\n margin-left: units(0);\n position: absolute;\n right: units(10);\n top: units(2);\n\n @include at-media($theme-header-min-width) {\n align-self: flex-end;\n margin-left: units(1.5);\n margin-bottom: units(1);\n position: relative;\n right: inherit;\n top: units(-2px);\n }\n }\n}\n\n.usa-language__link {\n margin-right: units(0);\n}\n\n.usa-language__primary {\n width: auto;\n}\n\n.usa-language__primary-item:last-of-type {\n position: relative;\n\n .usa-language__submenu {\n @include u-pin-right;\n }\n}\n\n.usa-language__submenu {\n @include add-list-reset;\n @include nav-sublist;\n background-color: color(\"primary-darker\");\n position: absolute;\n width: units(\"card-lg\");\n z-index: z-index(400);\n\n &[aria-hidden=\"true\"] {\n display: none;\n }\n\n .usa-language__submenu-item {\n a {\n color: color(\"white\");\n display: block;\n line-height: line-height($theme-navigation-font-family, 3);\n padding: 0;\n padding: units(1);\n text-decoration: none;\n\n &:focus {\n outline-offset: units(\"neg-05\");\n }\n\n &:hover {\n color: color(\"white\");\n text-decoration: underline;\n }\n }\n }\n}\n\n.usa-language__submenu-list {\n @include unstyled-list;\n\n .usa-language__submenu-list-item {\n margin: 0;\n font-size: font-size($theme-navigation-font-family, \"2xs\");\n\n a {\n line-height: line-height($theme-navigation-font-family, 3);\n }\n }\n}\n","@use \"uswds-core\" as *;\n\n// Flexbox positioning to move sidenav below main content on small screens\n.usa-layout-docs__sidenav {\n order: 2;\n padding-top: units(4);\n\n @include at-media(\"desktop\") {\n padding-top: 0;\n }\n}\n\n.usa-layout-docs__main {\n @include at-media(\"desktop\") {\n order: 2;\n }\n}\n","@use \"sass:map\";\n\n@use \"uswds-core\" as *;\n\n/* stylelint-disable */\n\n$namespace-grid: ns(\"grid\");\n\n// basic container\n.#{$namespace-grid}container {\n $props: append-important($grid-global, $theme-grid-container-max-width);\n @include grid-container($props);\n}\n\n// container with custom widths\n@each $width-key, $width-value in $system-breakpoints {\n .#{$namespace-grid}container-#{$width-key} {\n $props: append-important($grid-global, $width-key);\n @include grid-container($props);\n }\n}\n\n// responsive containers...\n@each $mq-key, $mq-value in $system-breakpoints {\n @if map.get($theme-utility-breakpoints-complete, $mq-key) {\n @include at-media($mq-key) {\n .#{$mq-key}#{$separator}#{$namespace-grid}container {\n $props: append-important($grid-global, desktop);\n @include grid-container($props);\n }\n\n // ...with custom widths\n @each $width-key, $width-value in $system-breakpoints {\n .#{$mq-key}#{$separator}#{$namespace-grid}container-#{$width-key} {\n $props: append-important($grid-global, $width-key);\n @include grid-container($props);\n }\n }\n }\n }\n}\n\n// basic row...\n.#{$namespace-grid}row {\n @include grid-row;\n\n // ...that includes column gaps\n &.#{$namespace-grid}gap {\n @include grid-gap-responsive;\n }\n @each $gap-key, $gap-val in map-deep-get($system-properties, gap, standard) {\n &.#{$namespace-grid}gap-#{$gap-key} {\n $props: append-important($grid-global, $gap-key);\n @include grid-gap($props);\n }\n }\n\n // responsive column gaps\n @each $mq-key, $mq-value in $system-breakpoints {\n @if map.get($theme-utility-breakpoints-complete, $mq-key) {\n @include at-media($mq-key) {\n @each $gap-key,\n $gap-val in map-deep-get($system-properties, gap, standard)\n {\n &.#{$mq-key}#{$separator}#{$namespace-grid}gap-#{$gap-key} {\n $props: append-important($grid-global, $gap-key);\n @include grid-gap($props);\n }\n }\n }\n }\n }\n}\n\n// basic columns...\n[class*=\"#{$namespace-grid}col\"] {\n @include u-position(relative);\n @include u-width(full);\n box-sizing: border-box;\n}\n\n.#{$namespace-grid}col {\n $props: append-important($grid-global, fill);\n @include grid-col($props);\n}\n\n.#{$namespace-grid}col-auto {\n $props: append-important($grid-global, auto);\n @include grid-col($props);\n}\n\n.#{$namespace-grid}col-fill {\n $props: append-important($grid-global, fill);\n @include grid-col($props);\n}\n\n// ...with widths\n@each $width-key, $width-value in $system-layout-grid-widths {\n .#{$namespace-grid}col-#{$width-key} {\n $props: append-important($grid-global, $width-key);\n @include grid-col($props);\n }\n}\n\n// responsive columns\n@each $mq-key, $mq-value in $system-breakpoints {\n @if map.get($theme-utility-breakpoints-complete, $mq-key) {\n @include at-media($mq-key) {\n .#{$mq-key}#{$separator}#{$namespace-grid}col {\n $props: append-important($grid-global, fill);\n @include grid-col($props);\n }\n .#{$mq-key}#{$separator}#{$namespace-grid}col-fill {\n $props: append-important($grid-global, fill);\n @include grid-col($props);\n }\n .#{$mq-key}#{$separator}#{$namespace-grid}col-auto {\n $props: append-important($grid-global, auto);\n @include grid-col($props);\n }\n\n @each $width-key, $width-value in $system-layout-grid-widths {\n .#{$mq-key}#{$separator}#{$namespace-grid}col-#{$width-key} {\n $props: append-important($grid-global, $width-key);\n @include grid-col($props);\n }\n }\n }\n }\n}\n\n// basic offsets\n@each $width-key, $width-value in $system-layout-grid-widths {\n .#{$namespace-grid}offset-#{$width-key} {\n $props: append-important($grid-global, $width-key);\n @include grid-offset($props);\n }\n}\n.#{$namespace-grid}offset-none {\n $props: append-important($grid-global, none);\n @include grid-offset($props);\n}\n\n// responsive offsets\n@each $mq-key, $mq-value in $system-breakpoints {\n @if map.get($theme-utility-breakpoints-complete, $mq-key) {\n @each $width-key, $width-value in $system-layout-grid-widths {\n @include at-media($mq-key) {\n .#{$mq-key}#{$separator}#{$namespace-grid}offset-#{$width-key} {\n $props: append-important($grid-global, $width-key);\n @include grid-offset($props);\n }\n }\n }\n @include at-media($mq-key) {\n .#{$mq-key}#{$separator}#{$namespace-grid}offset-none {\n $props: append-important($grid-global, none);\n @include grid-offset($props);\n }\n }\n }\n}\n/* stylelint-enable */\n","@use \"uswds-core\" as *;\n\n.usa-media-block {\n @include u-align-items(\"align-start\");\n @include u-display(\"flex\");\n}\n\n.usa-media-block__img {\n @include media-block-img;\n}\n\n.usa-media-block__body {\n @include u-flex(1);\n}\n","@use \"uswds-core\" as *;\n\n.usa-js-no-click {\n pointer-events: none;\n user-select: none;\n\n .usa-modal,\n .usa-modal * {\n pointer-events: auto;\n user-select: text;\n }\n}\n\n// Prevents propagation issue in Safari an opener\n// has a child element, and when clicked, prevents\n// intended action\n[data-open-modal] * {\n pointer-events: none;\n}\n\n.usa-modal-wrapper {\n text-align: center;\n transition: opacity $project-easing;\n\n // Using visibility: hidden instead of display: none because\n // of iOS VoiceOver issue:\n // https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/\n &.is-hidden {\n visibility: hidden;\n opacity: opacity(0);\n position: fixed;\n }\n\n &.is-visible {\n visibility: visible;\n opacity: opacity(100);\n position: fixed;\n z-index: z-index(\"top\");\n }\n}\n\n.usa-modal-overlay {\n background: color(\"black-transparent-70\");\n bottom: 0;\n height: 100%;\n left: 0;\n overflow: scroll;\n overflow-x: hidden;\n padding: units(3);\n position: fixed;\n scroll-behavior: smooth;\n top: 0;\n width: 100%;\n\n &:before {\n content: \"\";\n display: inline-block;\n height: 100%;\n vertical-align: middle;\n }\n\n &[data-force-action=\"true\"] {\n pointer-events: none;\n\n * {\n pointer-events: auto;\n }\n }\n}\n\n// Prevents modals from flickering\n// Still allows content to be accessed\n.usa-js-loading {\n .usa-modal-wrapper {\n @include add-sr-only;\n }\n\n .usa-modal-wrapper:target {\n position: static;\n }\n}\n\n.usa-modal {\n @include typeset;\n @include u-radius($theme-modal-border-radius);\n background: white;\n @include set-text-from-bg(\"white\");\n display: inline-block;\n margin: units(2.5) auto;\n max-width: units($theme-modal-default-max-width);\n position: relative;\n text-align: left;\n vertical-align: middle;\n width: 100%;\n\n &:focus {\n outline: none;\n }\n}\n\n.usa-modal__content {\n display: flex;\n flex-direction: column-reverse;\n padding-top: units(4);\n width: 100%;\n}\n\n.usa-modal__main {\n margin: 0 auto;\n padding: units(1) units(4) units(4);\n}\n\n// Prevents JS not recognizing as part of close button.\n.usa-modal-wrapper [data-close-modal] > .usa-icon,\n.usa-modal-wrapper [data-close-modal] > .usa-icon use {\n pointer-events: none !important;\n}\n\n.usa-modal__close {\n align-items: center;\n align-self: flex-end;\n background-color: transparent;\n color: color(\"base\");\n display: flex;\n flex-shrink: 0;\n font-size: size(\"ui\", \"2xs\");\n margin: units(-4) 0 0 auto;\n padding: units(0.5) units(0.5);\n width: auto;\n\n &:hover,\n &:active {\n background-color: transparent;\n color: color(\"ink\");\n }\n\n &:focus {\n outline-offset: 0;\n }\n\n .usa-icon {\n height: units(4);\n margin: units(2px) units(2px) 0 0;\n width: units(4);\n }\n}\n\n.usa-modal__heading {\n @include u-font(\"heading\", \"lg\");\n line-height: line-height(\"heading\", 3);\n margin-top: 0;\n}\n\n.usa-modal__footer {\n margin-top: units(3);\n}\n\n// Variants\n.usa-modal--lg {\n max-width: units($theme-modal-lg-max-width);\n width: 100%;\n\n .usa-modal__main {\n padding-bottom: units(8);\n padding-top: units(2.5);\n width: 100%;\n max-width: units($theme-modal-lg-content-max-width);\n }\n\n .usa-modal__heading {\n @include at-media(\"tablet\") {\n @include u-font(\"heading\", \"xl\");\n }\n }\n}\n\n.usa-js-modal--active {\n overflow: hidden;\n}\n","@use \"sass:math\";\n@use \"sass:list\";\n@use \"sass:color\";\n\n@use \"uswds-core\" as *;\n\n$pagination-context: \"Pagination\";\n$pagination-margin-x: 0.5 !default;\n$pagination-margin-y: 2 !default;\n$pagination-margin-padding: 1 !default;\n$pagination-target-size: 5 !default;\n\n$pagination-current-color: get-color-token-from-bg(\n $theme-pagination-background-color\n);\n\n$pagination-link-tokens: get-link-tokens-from-bg(\n $theme-pagination-background-color,\n $theme-link-reverse-color,\n $theme-link-color,\n $context: $pagination-context\n);\n\n$pagination-link-token: list.nth($pagination-link-tokens, 1);\n$pagination-hover-token: list.nth($pagination-link-tokens, 2);\n\n// Pagination\n// ---------------------------------\n.usa-pagination {\n @include u-margin-y($pagination-margin-y);\n @include typeset($theme-pagination-font-family);\n display: flex;\n justify-content: center;\n}\n\n// TODO: Pull out magic number into vars? Could this better?\n.usa-pagination .usa-icon {\n height: px-to-rem(18px);\n width: px-to-rem(18px);\n}\n\n// Shared styles\n// ---------------------------------\n\n// Pagination nav\n// ---------------------------------\n.usa-pagination__list {\n @include add-list-reset;\n align-items: center;\n display: flex;\n flex-flow: row nowrap;\n justify-content: center;\n width: auto;\n}\n\n// Pagination nav items\n// 1. Prevents chromium browsers from adding additional vertical whitespace\n.usa-pagination__item {\n display: inline-flex; // 1\n height: units($pagination-target-size);\n justify-content: center;\n line-height: 1;\n margin-left: units($pagination-margin-x);\n margin-right: units($pagination-margin-x);\n min-width: units($pagination-target-size);\n\n @include at-media($theme-pagination-breakpoint) {\n flex: 1 0 auto; // flex: 1 won't work in IE11\n }\n}\n\n// Don't show previous and next at mobile.\n// Functionality exists with page buttons.\n.usa-pagination__arrow {\n display: none;\n @include at-media($theme-pagination-breakpoint) {\n display: inherit;\n }\n}\n\n.usa-pagination__previous-page {\n @include at-media($theme-pagination-breakpoint) {\n margin-right: units(math.div($pagination-target-size, 2));\n }\n}\n\n.usa-pagination__next-page {\n @include at-media($theme-pagination-breakpoint) {\n margin-left: units(math.div($pagination-target-size, 2));\n }\n}\n\n.usa-pagination__link {\n align-items: center;\n color: color($pagination-link-token);\n display: inline-flex;\n text-decoration: none;\n\n &[disabled] {\n opacity: 0.4 !important;\n pointer-events: none;\n }\n\n &:hover,\n &:focus,\n &:active {\n color: color($pagination-hover-token);\n text-decoration: underline;\n }\n\n &:visited {\n color: color($pagination-link-token);\n }\n}\n\n.usa-pagination__button {\n align-items: center;\n border-color: color.adjust(color($pagination-current-color), $alpha: -0.8);\n border-radius: radius($theme-pagination-button-border-radius);\n border-style: solid;\n border-width: units($theme-pagination-button-border-width);\n color: color($pagination-link-token);\n display: inline-flex;\n justify-content: center;\n padding: units($pagination-margin-padding);\n text-decoration: none;\n width: 100%;\n\n &:hover,\n &:focus,\n &:active {\n color: color($pagination-hover-token);\n border-color: color($pagination-hover-token);\n\n @media (forced-colors: active) {\n border: $border-high-contrast;\n }\n }\n}\n\n.usa-pagination .usa-current {\n $text-color: if(\n $theme-pagination-background-color == \"default\",\n $theme-body-background-color,\n $theme-pagination-background-color\n );\n background-color: color($pagination-current-color);\n border-color: transparent;\n color: color($text-color);\n\n @media (forced-colors: active) {\n border: $border-high-contrast;\n color: buttonText;\n }\n\n &:hover,\n &:focus,\n &:active {\n background-color: color($pagination-current-color);\n color: color($text-color);\n text-decoration: none;\n\n @media (forced-colors: active) {\n color: buttontext;\n }\n }\n}\n\n.usa-pagination__overflow {\n align-items: center;\n align-self: stretch;\n display: inherit;\n user-select: none;\n padding: units($pagination-margin-padding);\n opacity: 0.5;\n}\n\n// ---------------------------------\n// Variants\n// ---------------------------------\n","@use \"uswds-core\" as *;\n\n// PROCESS LIST\n$theme-process-list-counter-content-padding: calc(\n (#{units($theme-process-list-counter-size)} / 2) - #{units(0.5)}\n);\n$theme-process-list-counter-line-x-position: calc(\n (\n (#{units($theme-process-list-counter-size)} / 2) -\n (#{units($theme-process-list-connector-width)} / 2)\n )\n);\n\n@include override-prose {\n .usa-process-list {\n @include typeset($theme-process-list-font-family);\n @include unstyled-list;\n counter-reset: usa-numbered-list;\n padding: 20px 0 0 $theme-process-list-counter-line-x-position;\n position: relative;\n\n // Use increased specificity to override unstyled-list()\n & > .usa-process-list__item {\n @include u-measure(5);\n }\n }\n\n .usa-process-list__item {\n border-left: units($theme-process-list-connector-width) solid\n color($theme-process-list-connector-color);\n font-size: size(\n $theme-process-list-font-family,\n $theme-process-list-font-size\n );\n margin-bottom: 0;\n padding-bottom: units(4);\n padding-left: calc(#{$theme-process-list-counter-content-padding} * 2);\n }\n}\n\n.usa-process-list__item {\n &:last-child {\n border-left: units($theme-process-list-connector-width) solid transparent;\n }\n\n &::before {\n @include u-flex(\"row\", \"align-center\", \"justify-center\");\n $half-of-font-size: -0.4rem;\n @include u-circle($theme-process-list-counter-size);\n background-color: color($theme-process-list-counter-background-color);\n border: units($theme-process-list-counter-border-width) solid\n color($theme-process-list-counter-border-color);\n box-shadow: 0 0 0 units($theme-process-list-counter-gap-width)\n color($theme-process-list-counter-gap-color);\n color: color($theme-process-list-counter-text-color);\n content: counter(usa-numbered-list, decimal);\n counter-increment: usa-numbered-list;\n display: flex;\n font-family: family($theme-process-list-counter-font-family);\n font-size: size(\n $theme-process-list-counter-font-family,\n $theme-process-list-counter-font-size\n );\n font-weight: font-weight(\"bold\");\n height: units($theme-process-list-counter-size);\n left: 0;\n line-height: lh($theme-process-list-counter-font-family, 1);\n margin-top: $half-of-font-size;\n position: absolute;\n width: units($theme-process-list-counter-size);\n }\n\n ul {\n list-style-type: disc;\n\n li {\n margin-bottom: units(0.5);\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n > *:first-child {\n margin-top: 0;\n }\n\n > *:last-child {\n margin-bottom: 0;\n }\n}\n\n.usa-process-list__heading {\n @include typeset(\n $theme-process-list-heading-font-family,\n $theme-process-list-heading-font-size,\n 2\n );\n color: color($theme-process-list-heading-color);\n font-family: family($theme-process-list-heading-font-family);\n font-weight: font-weight(\"bold\");\n margin: 0;\n\n & + * {\n margin-top: units(0.5);\n }\n}\n","@use \"uswds-core\" as *;\n\n// Map for high contrast search icon\n$search-icon: (\n \"name\": \"search\",\n \"color\": ButtonText,\n \"svg-height\": 20,\n \"svg-width\": 20,\n \"height\": units(3),\n);\n\n.usa-search {\n @include border-box-sizing;\n @include clearfix;\n @include typeset($theme-search-font-family);\n position: relative;\n\n // if role is in the