// AutoUpdateFileChromatic
@use "uswds-core" as *;
@use "uswds_custom_theme" as *;

/*
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
========================================
========================================
========================================
----------------------------------------
USWDS THEME CUSTOM STYLES
----------------------------------------
!! Copy this file to your project's
sass root. Don't edit the version
in node_modules.
----------------------------------------
Custom project SASS goes here.

i.e.
@include u-padding-right('05');
----------------------------------------
*/

html,
body {
    height: 100%;
}

.footer {
    flex-shrink: 0;
}

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
    width: 100%;
    min-height: calc(100vh - 230px);
    padding: 0 0 4rem 0;
}

.usa-banner__inner,
.usa-banner__header--expanded .usa-banner__inner {
    margin-left: 0;
    margin-right: 0;
}

// NAVIGATION

.usa-overlay {
    z-index: 300;
}

.usa-nav__close {
    cursor: pointer;
}

.usa-nav__primary {
    margin-top: 0;
    margin-bottom: 0;
    list-style: none;
}

.usa-logo {
    margin: units(3) units(1.5) units(3) 0;
}

.usa-nav__request-account {
    font-weight: normal;
    text-decoration: underline;
}

.usa-nav__primary-item a.usa-button {
    color: color("primary");
}

// Breadcrumb

.usa-breadcrumb {
    margin-top: units(2);
}

// TYPOGRAPHY

.usa-intro {
    line-height: units(4);
}

// ALERT
.usa-site-alert {
    .usa-alert__heading {
        font-size: size("body", "md");
    }
}

// TABLE
.usa-table {
    width: 100%;

    @media (max-width: $tablet) {
        display: block;
        overflow-x: auto;
    }
}

// MODAL

.usa-modal__main {
    word-wrap: break-word;
    width: 100%;
}

// MEDIA: DESKTOP

@media (min-width: 64em) {
    .usa-header--basic .usa-nav-container {
        max-width: 100%;
        padding-left: 2rem;
        padding-right: 2rem;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: flex-start;
        align-content: flex-start;
    }

    .usa-header--basic .usa-navbar {
        width: auto;
    }

    .usa-header--basic .usa-nav {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        padding: 0;
    }

    .usa-header--basic .usa-nav__primary {
        flex: 1;
        height: 100%;
    }

    .usa-header--basic .usa-nav__link {
        position: relative;
    }

    .usa-nav__primary > .usa-nav__primary-item > a {
        height: 100%;
        font-weight: normal;
        color: #2e2e2e;
        padding: units(3);
    }

    .usa-nav__primary button {
        height: 100%;
        padding: units(3);
        color: #2e2e2e;
        font-weight: normal;
    }

    .usa-nav__primary button[aria-expanded="true"] span {
        color: #ffffff;
    }

    .usa-nav__primary button span {
        font-weight: normal;
        color: #2e2e2e;
        vertical-align: super;
    }

    .usa-header--basic .usa-nav__link:hover::after {
        bottom: 0;
    }

    .usa-nav__primary > .usa-nav__primary-item.usa-current > a {
        color: #0b4778;
        padding: units(3);
    }

    .usa-nav__primary > .usa-current > a::after {
        background-color: color("primary");
        border-radius: 0;
        content: "";
        display: block;
        position: absolute;
        bottom: units(-0.5);
        height: 0.25rem;
        left: 1rem;
        right: 1rem;
    }

    .usa-header--basic .usa-nav__primary-item:last-of-type .usa-nav__submenu {
        left: 0;
    }

    .prime-user-account {
        text-align: right;
    }
}

// MEDIA: MOBILE

@media (max-width: 63.99em) {
    .usa-logo {
        margin-left: 1rem;
    }
    .usa-header--basic .usa-nav {
        align-items: start;
        width: 15rem;
    }
    .usa-header--basic .usa-navbar {
        width: 100%;
        z-index: 200;
        position: relative;
        border-bottom: none;
    }
    .usa-nav__primary {
        width: 100%;
    }
    .prime-user-account {
        width: 100%;
        text-align: left;
        margin-bottom: 2rem;
        margin-left: 1rem;
    }
    .usa-breadcrumb {
        margin-top: 0;
        padding-top: 0;
    }
}

// ComponentHeading as div, with header element inside
.usa-process-list__heading,
.usa-alert__heading {
    & h1,
    & h2,
    & h3,
    & h4,
    & h5,
    & h6 {
        margin: 0;
    }
}

.usa-card__header {
    font-weight: bold;
}

.usa-card__container {
    @include u-margin-right(3);
}

/**
 * Reset ul style within cards due to usa-card-group.
 */
.usa-card-group {
    .usa-card {
        ul {
            list-style: disc;
        }
    }
}

/**
 * Allow table to auto size up to 'widescreen'.
 */
.usa-table-container--scrollable.usa-table-container--widescreen {
    .usa-table {
        @include u-maxw("widescreen");
        width: auto;
        table-layout: fixed;
        td {
            white-space: normal;
        }
    }
}

/**
 * Auto scale icons inside buttons.
 */
.usa-button {
    .usa-icon--auto {
        vertical-align: text-bottom;
        width: auto;
        height: 1rlh;
    }
}

.usa-header + main {
    border-top: none;
}

/* allow column count override */
.usa-identifier__section.column-count-3 ul {
    column-count: 3;
}

/* allow for spacing between text and external image */
.usa-link--external::after {
    @include u-margin-left(1);
}

/* custom blockquote from design */
blockquote {
    @include u-margin-x(0);
    @include u-padding(3);
    @include u-border-left("primary");
    // 6 px
    border-left-width: calc(#{units("05")} + #{units(2px)});
    @include set-text-and-bg(
        $theme-summary-box-background-color,
        $theme-summary-box-text-color,
        $context: "blockquote"
    );
    @include u-font("sans", "lg");

    > *:first-child {
        @include u-margin-top(0);
    }

    footer {
        @include u-font("sans", "md");
        font-weight: bold;

        cite {
            display: block;
            font-weight: initial;
        }
    }
}

.usa-prose {
    /* Do not apply uswds measure on elements (allow to be full-width) */
    & > *:not(.grid-container, img),
    li {
        max-width: unset !important;
    }

    /* respect custom margin-tops on paragraph siblings */
    > p + * {
        @each $num, $val in $number-to-value {
            &[class*="margin-top-#{$val}"] {
                @include u-margin-top($val);
            }
        }
    }

    // content flush to top
    > :first-child {
        @include u-margin-top(0);
    }

    /* custom margin-top spacing on direct children per design */
    > *:not([class*="margin-top"], :first-child, [class*="rs-hero-wrapper"]) {
        // default margin-top
        @include u-margin-top(2.5);

        &:is(hr.rs-hr--alternate) {
            @include u-margin-top(3);
        }

        &:is(h3) {
            @include u-margin-top(4);
        }

        &:is(
                figure,
                img,
                blockquote,
                .usa-accordion,
                .usa-process-list,
                .usa-card-group,
                .usa-summary-box
            ) {
            @include u-margin-top(4);

            & + & {
                @include u-margin-top(5);
            }
        }

        &:is(h2, .rs-back-to-top) {
            @include u-margin-top(8);
        }
    }
}

.usa-link {
    .usa-icon {
        // try to match icon closer to link baseline
        vertical-align: middle;
    }
}

// Apply font rules at a root (instead of needing usa-prose)
body {
    @include typeset($theme-prose-font-family);

    h1 {
        @include h1;
    }
    h2 {
        @include h2;
    }
    h3 {
        @include h3;
    }
    h4 {
        @include h4;
    }
    h5 {
        @include h5;
    }
    h6 {
        @include h6;
    }

    // If header parent has font rule applied, inherit it instead
    // of using the rules above (ex: apply desired header size
    // to card header instead of having to break out of markdown
    // syntax on the h1-6 element).
    [class*="font-"] {
        > h1,
        > h2,
        > h3,
        > h4,
        > h5,
        > h6 {
            font-size: inherit;
        }
    }
}

.usa-summary-box {
    @include u-padding(4);

    .usa-summary-box__body {
        > *:first-child {
            @include u-margin-top(0);
        }

        > *:last-child {
            @include u-margin-bottom(0);
        }
    }
}

figcaption {
    @include u-margin-top(2.5);
    @include u-font("sans", "2xs");
    @include u-text("gray-50");
}

figure {
    @include u-margin-x(0);

    > .grid-row {
        @include u-margin-top(2);
    }
}
