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\");\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(20);\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 &.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: 50%;\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","@mixin clearfix {\n &::after {\n clear: both;\n content: \"\";\n display: block;\n }\n}\n","/*\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n* * * * * ==============================\n========================================\n========================================\n========================================\n----------------------------------------\nUSWDS 2.9.0\n----------------------------------------\nCOMPONENT SETTINGS\n----------------------------------------\nRead more about settings and\nUSWDS style tokens in the documentation:\nhttps://designsystem.digital.gov/design-tokens\n----------------------------------------\n*/\n\n// Accordion\n$theme-accordion-border-width: 0.5 !default;\n$theme-accordion-border-color: \"base-lightest\" !default;\n$theme-accordion-font-family: \"body\" !default;\n\n// Alert\n$theme-alert-bar-width: 1 !default;\n$theme-alert-font-family: \"ui\" !default;\n$theme-alert-icon-size: 4 !default;\n$theme-alert-padding-x: 2.5 !default;\n\n// Banner\n$theme-banner-background-color: \"base-lightest\" !default;\n$theme-banner-font-family: \"ui\" !default;\n$theme-banner-link-color: default !default;\n$theme-banner-max-width: \"desktop\" !default;\n\n// Breadcrumb\n$theme-breadcrumb-background-color: \"white\" !default;\n$theme-breadcrumb-font-size: \"sm\" !default;\n$theme-breadcrumb-font-family: \"body\" !default;\n$theme-breadcrumb-link-color: default !default;\n$theme-breadcrumb-min-width: \"mobile-lg\" !default;\n$theme-breadcrumb-padding-bottom: 2 !default;\n$theme-breadcrumb-padding-top: 2 !default;\n$theme-breadcrumb-padding-x: 0 !default;\n$theme-breadcrumb-separator-color: \"base\" !default;\n\n// Button\n$theme-button-font-family: \"ui\" !default;\n$theme-button-border-radius: \"md\" !default;\n$theme-button-small-width: 6 !default;\n$theme-button-stroke-width: 2px !default;\n\n// Card\n$theme-card-border-color: \"base-lighter\" !default;\n$theme-card-border-radius: \"lg\" !default;\n$theme-card-border-width: 2px !default;\n$theme-card-gap: 2 !default;\n$theme-card-flag-min-width: \"tablet\" !default;\n$theme-card-flag-image-width: \"card-lg\" !default;\n$theme-card-font-family: \"body\" !default;\n$theme-card-header-typeset: \"heading\", \"lg\", 2 !default;\n$theme-card-margin-bottom: 4 !default;\n$theme-card-padding-perimeter: 3 !default;\n$theme-card-padding-y: 2 !default;\n\n// Footer\n$theme-footer-font-family: \"body\" !default;\n$theme-footer-max-width: \"desktop\" !default;\n\n// Form and input\n$theme-checkbox-border-radius: \"sm\" !default;\n$theme-form-font-family: \"ui\" !default;\n$theme-input-line-height: 3 !default;\n$theme-input-max-width: \"mobile-lg\" !default;\n$theme-input-select-border-width: 2px !default;\n$theme-input-select-size: 2.5 !default;\n$theme-input-state-border-width: 0.5 !default;\n\n// Header\n$theme-header-font-family: \"ui\" !default;\n$theme-header-logo-text-width: 33% !default;\n$theme-header-max-width: \"desktop\" !default;\n$theme-header-min-width: \"desktop\" !default;\n\n// Hero\n$theme-hero-image: \"#{$theme-image-path}/hero.png\" !default;\n\n// Identifier\n$theme-identifier-font-family: \"ui\" !default;\n$theme-identifier-background-color: \"base-darkest\" !default;\n$theme-identifier-identity-domain-color: \"base-light\" !default;\n$theme-identifier-max-width: \"desktop\" !default;\n$theme-identifier-secondary-link-color: \"base-light\" !default;\n\n// Navigation\n$theme-navigation-font-family: \"ui\" !default;\n$theme-megamenu-columns: 3 !default;\n\n// Search\n$theme-search-font-family: \"ui\" !default;\n$theme-search-min-width: 27ch !default;\n\n// Sidenav\n$theme-sidenav-current-border-width: 0.5 !default;\n$theme-sidenav-font-family: \"ui\" !default;\n\n// Step indicator\n$step-indicator-background-color: \"white\" !default;\n$theme-step-indicator-counter-gap: 0.5 !default;\n$theme-step-indicator-counter-border-width: 0.5 !default;\n$theme-step-indicator-font-family: \"ui\" !default;\n$theme-step-indicator-heading-color: \"ink\" !default;\n$theme-step-indicator-heading-font-family: \"ui\" !default;\n$theme-step-indicator-heading-font-size: \"lg\" !default;\n$theme-step-indicator-heading-font-size-small: \"md\" !default;\n$theme-step-indicator-label-font-size: \"sm\" !default;\n$theme-step-indicator-min-width: \"tablet\" !default;\n$theme-step-indicator-segment-color-pending: \"base-lighter\" !default;\n$theme-step-indicator-segment-color-complete: \"primary-darker\" !default;\n$theme-step-indicator-segment-color-current: \"primary\" !default;\n$theme-step-indicator-segment-gap: 2px !default;\n$theme-step-indicator-segment-height: 1 !default;\n$theme-step-indicator-text-pending-color: \"base-dark\" !default;\n\n// Tooltips\n$theme-tooltip-background-color: \"ink\" !default;\n$theme-tooltip-font-color: \"base-lightest\" !default;\n$theme-tooltip-font-size: \"xs\" !default;\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 }\n}\n\n@mixin remove-bar {\n &::after {\n display: none;\n }\n}\n","// Hero feature\n// ==========================\n\n.usa-hero {\n @include border-box-sizing;\n @include typeset;\n @include u-padding-y($theme-site-margins-width);\n background-image: url(\"#{$theme-hero-image}\");\n background-position: center;\n background-size: cover;\n color: color(\"white\");\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","// 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",".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","@mixin media-block-img($margin-right: units(1)) {\n flex-shrink: 0;\n margin-right: $margin-right;\n}\n","@mixin outer-megamenu {\n @include u-pin(\"y\");\n background-color: color(\"primary-darker\");\n content: \"\";\n display: block;\n position: absolute;\n width: 100%;\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 @include at-media($theme-header-min-width) {\n // needs this round() to avoid a compile bug\n @include u-flex(round(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;\n right: 100%;\n }\n }\n\n &::after {\n @include at-media($theme-header-min-width) {\n @include outer-megamenu;\n left: 100%;\n }\n }\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",".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","// Navigation helpers\n// ---------------------------------\n\n@mixin primary-nav-link {\n line-height: line-height($theme-navigation-font-family, 1);\n padding: units(2);\n}\n\n$nav-link-color: \"base-dark\";\n$sliding-panel-width: \"card-lg\";\n$nav-link-accordion-icon-size: 1.5;\n$nav-link-arrow-icon-size: 1;\n\n// TODO: Collect animations in a common location?\n@keyframes slidein-left {\n from {\n transform: translateX(units($sliding-panel-width));\n }\n\n to {\n transform: translateX(0);\n }\n}\n\n// Header navigation\n// ---------------------------------\n.usa-nav {\n @include typeset($theme-navigation-font-family, null, 1);\n @include at-media-max($theme-header-min-width) {\n @include u-pin(\"right\");\n @include u-pin(\"y\");\n position: fixed;\n background: color(\"white\");\n border-right: 0;\n display: none;\n flex-direction: column;\n overflow-y: auto;\n padding: units(2);\n width: units($sliding-panel-width);\n z-index: z-index(500);\n\n &.is-visible {\n animation: slidein-left 0.3s ease-in-out;\n display: flex;\n }\n }\n\n @include at-media($theme-header-min-width) {\n float: right;\n position: relative;\n }\n\n .usa-search {\n @include at-media($theme-header-min-width) {\n margin-left: units(2);\n }\n }\n\n .usa-accordion {\n @include typeset($theme-navigation-font-family, null, 1);\n }\n}\n\n// Primary navigation\n// ---------------------------------\n\n.usa-nav__primary {\n // Until the $theme-header-width,\n // use the usa-nav-list styles for the slide-in nav\n @include at-media-max($theme-header-min-width) {\n @include nav-list(\"nav\");\n margin-top: units(3);\n order: 2;\n\n a {\n @include u-padding-y(1.5);\n }\n }\n\n // At $theme-header-width and wider...\n @include at-media($theme-header-min-width) {\n display: flex;\n }\n\n // all nav items in the nav\n .usa-nav__primary-item {\n a {\n text-decoration: none;\n }\n }\n\n // just level 1 nav items...\n > .usa-nav__primary-item {\n line-height: line-height($theme-navigation-font-family, 2);\n @include at-media($theme-header-min-width) {\n font-size: font-size($theme-navigation-font-family, \"2xs\");\n line-height: line-height($theme-navigation-font-family, 1);\n }\n\n // ...and their direct links\n > a {\n @include at-media($theme-header-min-width) {\n @include primary-nav-link;\n color: color($nav-link-color);\n display: block;\n font-weight: font-weight(\"bold\");\n\n &:hover {\n color: color(\"primary\");\n }\n }\n }\n }\n\n a {\n @include at-media($theme-header-min-width) {\n @include u-padding-y(1);\n }\n }\n\n button {\n $button-vertical-offset: 53%; // XXX: Magic number\n\n @include button-unstyled;\n color: color($nav-link-color);\n font-weight: font-weight(\"normal\");\n line-height: line-height($theme-navigation-font-family, 2);\n padding: units(1.5) units(2);\n text-decoration: none;\n\n @include at-media($theme-header-min-width) {\n @include primary-nav-link;\n font-size: font-size($theme-navigation-font-family, \"2xs\");\n font-weight: font-weight(\"bold\");\n }\n\n &:hover {\n color: color(\"primary\");\n background-color: color(\"base-lightest\");\n text-decoration: none;\n\n @include at-media($theme-header-min-width) {\n background-color: transparent;\n }\n }\n\n &[aria-expanded=\"false\"] {\n /* stylelint-disable-line selector-no-qualifying-type */\n @include add-background-svg(\"plus-alt\");\n background-position: right 0 center;\n background-size: units($nav-link-accordion-icon-size);\n\n @include at-media($theme-header-min-width) {\n @include add-background-svg(\"angle-arrow-down\");\n background-size: units($nav-link-arrow-icon-size);\n background-position: right units(2) top $button-vertical-offset;\n }\n\n &:hover {\n @include at-media($theme-header-min-width) {\n @include add-background-svg(\"angle-arrow-down-primary\");\n }\n }\n }\n\n &[aria-expanded=\"true\"] {\n /* stylelint-disable-line selector-no-qualifying-type */\n @include add-background-svg(\"minus-alt\");\n background-position: right 0 center;\n background-size: units($nav-link-accordion-icon-size);\n\n @include at-media($theme-header-min-width) {\n @include add-background-svg(\"angle-arrow-up-white\");\n @include add-knockout-font-smoothing;\n background-size: units($nav-link-arrow-icon-size);\n background-color: color(\"primary-darker\");\n background-position: right units(2) top $button-vertical-offset;\n color: color(\"white\");\n }\n }\n }\n\n .usa-accordion__button {\n span {\n @include at-media($theme-header-min-width) {\n margin-right: 0;\n padding-right: units(2);\n }\n }\n }\n}\n\n// Secondary navigation\n// ---------------------------------\n\n.usa-nav__secondary {\n margin-top: units(2);\n\n @include at-media($theme-header-min-width) {\n // Note: Previius calc() couldn't work. don't hardcode rem vals\n bottom: units(8); // XXX magic number\n font-size: font-size($theme-navigation-font-family, \"2xs\");\n margin-top: units(1);\n min-width: calc(\n #{$theme-search-min-width} + #{units($theme-button-small-width)}\n );\n position: absolute;\n right: units($theme-site-margins-width);\n }\n\n .usa-search {\n margin-top: units(2);\n width: 100%;\n\n @include at-media($theme-header-min-width) {\n margin-left: 0;\n margin-top: units(1);\n }\n }\n}\n\n.usa-nav__secondary-links {\n @include add-list-reset;\n line-height: line-height($theme-navigation-font-family, 3);\n margin-top: units(3);\n\n @include at-media($theme-header-min-width) {\n float: right;\n line-height: line-height($theme-navigation-font-family, 1);\n margin-bottom: units(0.5);\n margin-top: 0;\n }\n\n .usa-nav__secondary-item {\n @include at-media($theme-header-min-width) {\n display: inline;\n padding-left: units(0.5);\n\n & + .usa-nav__secondary-item::before {\n color: color(\"base-lighter\");\n content: \"|\";\n padding-right: units(0.5);\n }\n }\n }\n\n a {\n color: color(\"base\");\n display: inline-block;\n font-size: font-size($theme-navigation-font-family, \"2xs\");\n text-decoration: none;\n\n &:hover {\n color: color(\"primary\");\n text-decoration: underline;\n }\n }\n}\n\n// Navigation dropdowns\n// ---------------------------------\n\n.usa-nav__submenu {\n @include at-media-max($theme-header-min-width) {\n @include nav-sublist;\n }\n\n @include at-media($theme-header-min-width) {\n @include add-list-reset;\n background-color: color(\"primary-darker\");\n width: units(\"card-lg\");\n padding: units(2);\n position: absolute;\n z-index: z-index(400);\n }\n\n &[aria-hidden=\"true\"] {\n display: none;\n }\n\n .usa-nav__submenu-item {\n @include at-media($theme-header-min-width) {\n & + * {\n margin-top: units(1.5);\n }\n\n a {\n color: color(\"white\");\n padding: 0;\n line-height: line-height($theme-navigation-font-family, 3);\n\n &:hover {\n background-color: transparent;\n color: color(\"white\");\n padding: 0;\n text-decoration: underline;\n }\n }\n }\n }\n}\n\n.usa-nav__submenu-list {\n @include unstyled-list;\n\n .usa-nav__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\n// Navigation close button\n// ---------------------------------\n\n.usa-nav__close {\n @include button-unstyled;\n @include u-square($size-touch-target);\n color: currentColor;\n flex: none;\n float: right;\n margin: units(-1.5) units(-2) units(2) auto;\n text-align: center;\n\n &:hover {\n color: currentColor;\n text-decoration: none;\n }\n\n @include at-media($theme-header-min-width) {\n display: none;\n }\n\n img {\n width: units(1.5);\n }\n\n + * {\n clear: both;\n }\n}\n\n.usa-js-mobile-nav--active {\n overflow: hidden;\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 {\n color: color(\"base-dark\");\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 color: color(\"primary\");\n text-decoration: none;\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(\"primary\");\n font-weight: font-weight(\"bold\");\n\n @include at-media(\"tablet\") {\n @include add-bar(\n $theme-sidenav-current-border-width,\n \"primary\",\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 {\n padding-left: units($sidenav-level-2-inset);\n }\n\n // level 3+\n & & a {\n padding-left: units($sidenav-level-3-inset);\n }\n\n // level 4+\n & & & a {\n content: \"foobar\";\n padding-left: units($sidenav-level-4-inset);\n }\n}\n","$step-indicator-label-margin-top: 1;\n$step-indicator-margin-bottom: 4;\n$step-indicator-header-margin-top: 4;\n$step-indicator-header-margin-top-sm: 2;\n$step-indicator-segment-height-mobile: 1;\n$step-indicator-counter-size: 5;\n$step-indicator-counter-size-sm: 3;\n\n.usa-step-indicator {\n @include typeset(\n $theme-step-indicator-font-family,\n $theme-step-indicator-label-font-size,\n 2\n );\n background-color: color($step-indicator-background-color);\n margin-bottom: units($step-indicator-margin-bottom);\n margin-left: calc(units($theme-step-indicator-segment-gap) / -2);\n margin-right: calc(units($theme-step-indicator-segment-gap) / -2);\n\n @include at-media($theme-step-indicator-min-width) {\n @include u-margin-x(0);\n }\n}\n\n.usa-step-indicator__segments {\n counter-reset: usa-step-indicator;\n display: flex;\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n.usa-step-indicator__segment {\n @include u-flex(\"fill\");\n counter-increment: usa-step-indicator;\n margin-left: calc(units($theme-step-indicator-segment-gap) / 2);\n margin-right: calc(units($theme-step-indicator-segment-gap) / 2);\n max-width: units(\"card-lg\");\n min-height: units($theme-step-indicator-segment-height);\n position: relative;\n\n // Add segment\n &:after {\n background-color: color($theme-step-indicator-segment-color-pending);\n content: \"\";\n display: block;\n // Use a fixed segment height for mobile regardless of settings\n height: units($step-indicator-segment-height-mobile);\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n\n @include at-media($theme-step-indicator-min-width) {\n height: units($theme-step-indicator-segment-height);\n }\n }\n}\n\n.usa-step-indicator__segment--complete {\n &::after {\n background-color: color($theme-step-indicator-segment-color-complete);\n }\n .usa-step-indicator__segment-label {\n color: color($theme-step-indicator-segment-color-complete);\n }\n}\n\n.usa-step-indicator__segment--current {\n &::after {\n background-color: color($theme-step-indicator-segment-color-current);\n }\n .usa-step-indicator__segment-label {\n color: color($theme-step-indicator-segment-color-current);\n font-weight: fw(\"bold\");\n }\n}\n\n.usa-step-indicator__segment-label {\n display: none;\n // Show labels only at the min-width\n @include at-media($theme-step-indicator-min-width) {\n color: color($theme-step-indicator-text-pending-color);\n display: block;\n font-size: size(\n $theme-step-indicator-font-family,\n $theme-step-indicator-label-font-size\n );\n // Add margin based on segment size\n margin-top: calc(\n #{units($theme-step-indicator-segment-height)} + #{units(\n $step-indicator-label-margin-top\n )}\n );\n padding-right: units(4);\n text-align: left;\n }\n}\n\n.usa-step-indicator__header {\n align-items: baseline;\n display: flex;\n}\n\n.usa-step-indicator__heading {\n color: color($theme-step-indicator-heading-color);\n font-family: family($theme-step-indicator-heading-font-family);\n font-size: size(\n $theme-step-indicator-heading-font-family,\n $theme-step-indicator-heading-font-size-small\n );\n font-weight: font-weight(\"bold\");\n margin: units($step-indicator-header-margin-top-sm) 0 0;\n @include at-media($theme-step-indicator-min-width) {\n font-size: size(\n $theme-step-indicator-heading-font-family,\n $theme-step-indicator-heading-font-size\n );\n margin-top: units($step-indicator-header-margin-top);\n }\n}\n\n.usa-step-indicator__current-step {\n $step-lh: lh($theme-step-indicator-heading-font-family, 2);\n @include u-circle($step-indicator-counter-size);\n @include u-text(\"normal\", \"tabular\");\n background-color: color($theme-step-indicator-segment-color-current);\n color: color($step-indicator-background-color);\n display: inline-block;\n // Magic number circle centering\n padding: calc(\n (#{units($step-indicator-counter-size)} - (2ex * #{$step-lh})) * 0.5\n );\n text-align: center;\n}\n\n.usa-step-indicator__total-steps {\n @include u-text(\"normal\", \"tabular\");\n color: color($theme-step-indicator-segment-color-current);\n margin-right: units(1);\n}\n\n.usa-step-indicator--counters,\n.usa-step-indicator--counters-sm {\n .usa-step-indicator__segment {\n @include at-media($theme-step-indicator-min-width) {\n $counter-lh: lh($theme-step-indicator-font-family, 1);\n // Remove segment gaps\n @include u-margin-x(0);\n\n // Add extra margin for counter\n @if $theme-step-indicator-counter-gap == 0 {\n margin-top: calc(\n (\n (\n #{units($step-indicator-counter-size)} -\n #{units($theme-step-indicator-segment-height)}\n ) /\n 2\n )\n );\n } @else {\n margin-top: calc(\n (\n (\n #{units($step-indicator-counter-size)} -\n #{units($theme-step-indicator-segment-height)}\n ) /\n 2\n ) +\n #{units($theme-step-indicator-counter-gap)}\n );\n }\n\n // Add counter\n &:before {\n @include u-circle($step-indicator-counter-size);\n @include u-text(\"tabular\");\n background-color: color($step-indicator-background-color);\n box-shadow: inset 0 0 0\n units($theme-step-indicator-counter-border-width)\n color($theme-step-indicator-segment-color-pending),\n 0 0 0 units($theme-step-indicator-counter-gap)\n color($step-indicator-background-color);\n color: color($theme-step-indicator-text-pending-color);\n content: counter(usa-step-indicator);\n display: block;\n font-weight: fw(\"bold\");\n left: 0;\n line-height: lh($theme-step-indicator-font-family, 1);\n // Magic number circle centering\n padding: calc(\n (#{units($step-indicator-counter-size)} - (2ex * #{$counter-lh})) *\n 0.5\n );\n // padding: 1.5ex;\n position: absolute;\n text-align: center;\n top: calc(\n (\n #{units($step-indicator-counter-size)} - #{units(\n $theme-step-indicator-segment-height\n )}\n ) / -2\n );\n z-index: z(100);\n }\n\n &:last-child {\n // Don't show the last segment when counters appear\n &:after {\n display: none;\n }\n }\n }\n }\n\n .usa-step-indicator__segment--complete {\n &::before {\n background-color: color($theme-step-indicator-segment-color-complete);\n box-shadow: 0 0 0 units($theme-step-indicator-counter-gap)\n color($step-indicator-background-color);\n color: color($step-indicator-background-color);\n }\n }\n\n .usa-step-indicator__segment--current {\n &::before {\n background-color: color($theme-step-indicator-segment-color-current);\n box-shadow: 0 0 0 units($theme-step-indicator-counter-gap)\n color($step-indicator-background-color);\n color: color($step-indicator-background-color);\n }\n }\n\n .usa-step-indicator__segment-label {\n @include at-media($theme-step-indicator-min-width) {\n // Add counter margin\n margin-top: calc(\n (\n (\n #{units($step-indicator-counter-size)} + #{units(\n $theme-step-indicator-segment-height\n )}\n ) / 2\n ) + #{units($step-indicator-label-margin-top)}\n );\n }\n }\n\n // Adjust segments with centered variant\n &.usa-step-indicator--center {\n @include at-media($theme-step-indicator-min-width) {\n .usa-step-indicator__segment {\n &:first-child {\n &:after {\n left: 50%;\n right: 0;\n width: auto;\n }\n }\n &:last-child {\n &:after {\n display: block;\n left: 0;\n right: 50%;\n width: auto;\n }\n }\n }\n }\n }\n}\n\n.usa-step-indicator--counters-sm {\n .usa-step-indicator__segment {\n @include at-media($theme-step-indicator-min-width) {\n $counter-lh: lh($theme-step-indicator-font-family, 1);\n // Add extra margin for counter\n @if $theme-step-indicator-counter-gap == 0 {\n margin-top: calc(\n (\n (\n #{units($step-indicator-counter-size-sm)} -\n #{units($theme-step-indicator-segment-height)}\n ) /\n 2\n )\n );\n } @else {\n margin-top: calc(\n (\n (\n #{units($step-indicator-counter-size-sm)} -\n #{units($theme-step-indicator-segment-height)}\n ) /\n 2\n ) +\n #{units($theme-step-indicator-counter-gap)}\n );\n }\n\n // Add counter\n &:before {\n @include u-circle($step-indicator-counter-size-sm);\n @include u-font-size($theme-step-indicator-font-family, 3);\n padding: calc(#{units(0.5)} + 1px);\n top: calc(\n (\n #{units($step-indicator-counter-size-sm)} - #{units(\n $theme-step-indicator-segment-height\n )}\n ) / -2\n );\n }\n\n &:last-child {\n // Don't show the last segment when counters appear\n &:after {\n display: none;\n }\n }\n }\n }\n\n .usa-step-indicator__segment-label {\n @include at-media($theme-step-indicator-min-width) {\n // Add counter margin\n margin-top: calc(\n (\n (\n #{units($step-indicator-counter-size-sm)} + #{units(\n $theme-step-indicator-segment-height\n )}\n ) / 2\n ) + #{units($step-indicator-label-margin-top)}\n );\n }\n }\n}\n\n.usa-step-indicator--no-labels {\n margin-left: calc(units($theme-step-indicator-segment-gap) / -2);\n margin-right: calc(units($theme-step-indicator-segment-gap) / -2);\n\n .usa-step-indicator__segment {\n // Remove extra counter margin\n margin-top: 0;\n // Add gap between segments\n margin-left: calc(units($theme-step-indicator-segment-gap) / 2);\n margin-right: calc(units($theme-step-indicator-segment-gap) / 2);\n &:before {\n // Don't show counters\n display: none;\n }\n &:last-child {\n // Show last segment\n &:after {\n display: block;\n }\n }\n }\n .usa-step-indicator__heading {\n margin-top: units($step-indicator-header-margin-top-sm);\n }\n}\n\n.usa-step-indicator--no-labels {\n .usa-step-indicator__segment-label {\n // Don't show labels, even if they exist\n display: none;\n }\n}\n\n.usa-step-indicator--center {\n margin-left: calc(units($theme-step-indicator-segment-gap) / -2);\n margin-right: calc(units($theme-step-indicator-segment-gap) / -2);\n\n .usa-step-indicator__segment {\n margin-left: calc(units($theme-step-indicator-segment-gap) / 2);\n margin-right: calc(units($theme-step-indicator-segment-gap) / 2);\n\n &:before {\n @if $theme-step-indicator-counter-gap == 0 {\n left: calc(50% - ((#{units($step-indicator-counter-size)}) / 2));\n } @else {\n left: calc(\n 50% -\n (\n (\n #{units($step-indicator-counter-size)} +\n #{units($theme-step-indicator-counter-gap)}\n ) /\n 2\n )\n );\n }\n }\n }\n\n .usa-step-indicator__segment-label {\n // Balance label padding\n @include u-padding-x(1);\n // Center labels\n text-align: center;\n }\n\n &.usa-step-indicator--no-labels {\n .usa-step-indicator__segment {\n // Use full-width segments\n &:first-child {\n &:after {\n left: 0;\n }\n }\n &:last-child {\n &:after {\n right: 0;\n }\n }\n }\n }\n\n &.usa-step-indicator--counters-sm {\n .usa-step-indicator__segment {\n &:before {\n @if $theme-step-indicator-counter-gap == 0 {\n left: calc(50% - ((#{units($step-indicator-counter-size-sm)}) / 2));\n } @else {\n left: calc(\n 50% -\n (\n (\n #{units($step-indicator-counter-size-sm)} +\n #{units($theme-step-indicator-counter-gap)}\n ) /\n 2\n )\n );\n }\n }\n }\n }\n}\n","// TODO: abstract and integrate\n@mixin search-icon {\n @include add-background-svg(\"search\");\n background-position: center center;\n background-size: units(2);\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