/* Pieces */
.hds-btn-close {
    height: var(--hds-banner-close-icon-size);
    width: var(--hds-banner-close-icon-size);
    /*background-size: var(--hds-banner-close-icon-size);*/
    /*background-image: url("/img/hds/Close.svg");*/
    mask: url("/img/hds/Close.svg") no-repeat center;
    mask-size: cover;
    /*background-position: center;*/
    /*background-color: transparent;*/
    /*background-repeat: no-repeat;*/
    border: 0;
    padding: 0;
    cursor: pointer;
}

/* Buttons */
.hds-btn {
    /* see .hds-button */
    font-family: var(--hds-font-family-inter), sans-serif !important;
    font-size: var(--hds-font-size-xs);
    font-weight: var(--hds-font-weight-semibold);
    letter-spacing: var(--hds-letter-spacing-neg-2);
    line-height: var(--hds-line-height-8);
    cursor: pointer;
}

a.hds-btn {
    text-decoration: none;
}

button.hds-btn {
    border: none;
}

.hds-btn {
    color: var(--hds-color-base-lightest);
    /* Figma has 12px on buttons, but Core doesn't have a token for 12px, or any direction on button padding; */
    padding: .75rem var(--hds-spacing-2);
    transition:
        background-color .2s ease,
        border-color .2s ease;
}

 /*override USWDS; commented out today since nasa.gov doesn't override USWDS here*/
/*button:not([disabled]):focus {*/
/*    outline: none;*/
/*}*/

/*.hds-btn:not([disabled]):focus {*/
/*    outline: var(--hds-color-mid-lighter) dashed 1px;*/
/*}*/

/*.hds-btn:not([disabled]):hover {*/
/*    outline: var(--hds-color-mid-lighter) solid 1px;*/
/*}*/

.hds-btn.hds-btn-primary {
    background-color: transparent;
    width: fit-content;
    padding: 0;
}

.hds-btn.hds-btn-primary span {
    margin-right: .3em;
    line-height: 1em;
}

.hds-btn.hds-btn-primary.hds-btn-primary-sm {
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
}

.hds-btn.hds-btn-primary svg {
    height: 1.2rem;
    width: 1.2rem;
    display: inline;
}

.hds-btn.hds-btn-primary svg circle {
    fill: var(--hds-color-primary);
    transition: all .2s ease;
}

.hds-btn.hds-btn-cta {
    background-color: var(--hds-color-primary);
}

.hds-btn.hds-btn-cta:hover {
    background-color: var(--hds-color-primary-dark);
}

.hds-btn.hds-btn-cta:disabled,
.hds-btn.hds-btn-cta:disabled:focus,
.hds-btn.hds-btn-cta:disabled:hover {
    background-color: var(--hds-color-mid-light);
    cursor: inherit;
}

.hds-btn.hds-btn-cta-secondary {
    background-color: var(--hds-color-secondary);
}

.hds-btn.hds-btn-cta-secondary:hover {
    background-color: var(--hds-color-secondary-dark);
}

.hds-btn.hds-btn-secondary-outline-light {
    background-color: transparent;
    border: var(--hds-color-secondary) solid 1px;
    color: var(--hds-color-base-darkest);
}

.hds-btn.hds-btn-secondary-outline-light:hover {
    border-color: var(--hds-color-secondary-dark);
}

.hds-btn.hds-btn-secondary-outline-dark {
    background-color: transparent;
    border: var(--hds-color-secondary) solid 1px;
    color: var(--hds-color-base-lightest);
}

.hds-btn.hds-btn-secondary-outline-dark:hover {
    border-color: var(--hds-color-secondary-dark);
}

@media (min-width: 640px) {
    .hds-btn.tablet\:hds-btn-secondary-outline-light {
        background-color: transparent;
        border: var(--hds-color-secondary) solid 1px;
        color: var(--hds-color-base-darkest);
    }

    .hds-btn.tablet\:hds-btn-secondary-outline-light:hover {
        border-color: var(--hds-color-secondary-dark);
    }
}




/* Links */
.hds-link {
    text-decoration: underline dashed;
    width: fit-content;
}

.hds-link:focus {
    outline-width: 1px;
    outline-style: dashed;
    text-decoration: none;
}

.hds-link:hover {
    text-decoration: underline;
}

@media (min-width: 640px) {
    /* repeat .hds-link to give this more specificity than the unqueried one */
    .hds-link.hds-link.tablet\:hds-link-light {
        color: var(--hds-color-darker);
        text-decoration-color: var(--hds-color-mid-darker);
    }

    .hds-link.hds-link.tablet\:hds-link-light:focus {
        outline-color: var(--hds-color-mid-darker);
    }

    .hds-link.hds-link.tablet\:hds-link-light:hover {
        text-decoration-color: var(--hds-color-darker);
    }
}

.hds-link.hds-link-light {
    color: var(--hds-color-darker);
    text-decoration-color: var(--hds-color-mid-darker);
}

.hds-link.hds-link-light:focus {
    outline-color: var(--hds-color-mid-darker);
}

.hds-link.hds-link-light:hover {
    text-decoration-color: var(--hds-color-darker);
}

.hds-link.hds-link-dark {
    color: var(--hds-color-base-lighter);
    text-decoration-color: var(--hds-color-mid-lighter);
}

.hds-link.hds-link-dark:focus {
    outline-color: var(--hds-color-mid-lighter);
}

.hds-link.hds-link-dark:hover {
    text-decoration-color: var(--hds-color-base-lighter);
}


/* Banners */
.hds-banner {
    --hds-banner-padding-y: var(--hds-spacing-2);
    --hds-banner-padding-x: var(--hds-spacing-4);

    padding: var(--hds-banner-padding-y) var(--hds-banner-padding-x);
    color: var(--hds-color-base-lightest);
    width: 100%;

    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 1fr;

    grid-gap: var(--hds-spacing-1);
    justify-content: start;
    position: relative;

    &.hds-banner-primary {
        background-color: var(--hds-color-primary-dark);
    }

    &.hds-banner-secondary {
        background-color: var(--hds-color-secondary-dark);
    }

    &.hds-banner-dismissible {
        --hds-banner-close-icon-size: 1em;
        /* space for the close icon */
        padding-right: calc(var(--hds-banner-padding-x) + var(--hds-banner-close-icon-size) + var(--hds-banner-padding-x));
        .hds-btn-close {
            width: var(--hds-banner-close-icon-size);
            height: var(--hds-banner-close-icon-size);
            position: absolute;
            top: calc(50% - var(--hds-banner-close-icon-size)/2);
            right: var(--hds-banner-padding-x);
            color: var(--hds-color-base-lightest);
            background-color: var(--hds-color-base-lightest);
        }
    }

    .hds-banner-title {
        /* see .hds-h5 */
        font-family: var(--hds-font-family-inter), sans-serif !important;
        font-size: var(--hds-font-size-xs);
        font-weight: var(--hds-font-weight-semibold);
        letter-spacing: var(--hds-letter-spacing-neg-2);
        line-height: var(--hds-line-height-8);
        margin-top: 0;
        margin-bottom: 0;
    }

    .hds-banner-text {
        /* Using a nonstandard to align w/ banner text and match Figma */
        font-family: var(--hds-font-family-inter), sans-serif !important;
        font-size: var(--hds-font-size-2xs);
        font-weight: var(--hds-font-weight-normal);
        letter-spacing: var(--hds-letter-spacing-1);
        line-height: var(--hds-line-height-8);
        margin-top: 0;
        margin-bottom: 0;
    }

}

@media (min-width: 1024px) {
    .hds-banner {
        --hds-banner-padding-x: var(--hds-spacing-6);

        grid-template-columns: max-content 1fr max-content;
        grid-template-rows: 1fr;

        .hds-banner-text {
            /* this makes the ratios nonstandard */
            font-size: var(--hds-font-size-xs);
        }
    }
}


/* Modals */
.hds-dialog-container {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: var(--hds-component-dialog-container-zindex);

    display: none;
    justify-content: center;
    align-items: center;



    .hds-dialog {
        --hds-dialog-max-width: min(21rem, calc(100vw - 2*var(--hds-spacing-2)));
        --hds-dialog-max-height: calc(100vh - 2*var(--hds-spacing-2));

        padding: var(--hds-spacing-6) var(--hds-spacing-4);
        color: var(--hds-color-base-darkest);
        /*background-color: rgba(var(--hds-color-base-lightest), 0);*/
        background-color: var(--hds-color-base-lightest);
        display: flex;
        flex-direction: column;
        gap: var(--hds-spacing-4);
        max-width: var(--hds-dialog-max-width);
        max-height: var(--hds-dialog-max-height);
        z-index: var(--hds-component-dialog-zindex);
        position: relative;


        @media (min-width: 640px) {
            --hds-dialog-max-width: min(30rem, calc(100vw - 2*var(--hds-spacing-9)));
            --hds-dialog-max-height: calc(100vh - 2*var(--hds-spacing-9));
        }

        @media (min-width: 1024px) {
            --hds-dialog-max-width: min(30rem, calc(100vw - 2*var(--hds-spacing-30)));
            --hds-dialog-max-height: calc(100vh - 2*var(--hds-spacing-30));
        }

        @media (min-width: 1400px) {
            --hds-dialog-max-width: min(50rem, calc(100vw - 2*var(--hds-spacing-30)));
            --hds-dialog-max-height: calc(100vh - 2*var(--hds-spacing-30));
        }

        .hds-btn-close {
            --hds-banner-close-icon-size: 20px;
            position: absolute;
            top: var(--hds-spacing-3);
            right: var(--hds-spacing-3);
            background-color: var(--hds-color-base-darkest);
        }

        .hds-dialog-content {
            display: flex;
            flex-direction: column;
            gap: var(--hds-spacing-2);
            min-height: 0; /* allows parent to control height and scroller to respond to it */

            .hds-dialog-heading {
                /* see .hds-h3 */
                font-family: var(--hds-font-family-inter), sans-serif !important;
                font-size: var(--hds-font-size-md);
                font-weight: var(--hds-font-weight-bold);
                letter-spacing: var(--hds-letter-spacing-neg-2);
                line-height: var(--hds-line-height-7);
            }

            .hds-dialog-body {
                /* see .hds-paragraph */
                font-family: var(--hds-font-family-public-sans), sans-serif !important;
                font-size: var(--hds-font-size-xs);
                font-weight: var(--hds-font-weight-normal);
                letter-spacing: var(--hds-letter-spacing-auto);
                line-height: var(--hds-line-height-12);
                overflow-y: scroll; /* enabled scrolling; requires min-height: 0 on parent */
            }
        }

        .hds-dialog-footer {
            display: flex;
        }
    }

}


/* Forms */
.hds-form {
    display: flex;
    flex-direction: column;
    gap: var(--hds-spacing-4);
}

.hds-form .hds-form-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem; /* nonstandard, .5u */
}

.hds-form .hds-form-input {
    appearance: none;
    padding: .875rem var(--hds-spacing-2);
    border: 1px solid var(--hds-color-mid-lightest);
    background-color: var(--hds-color-base-lightest);
}

.hds-form .hds-form-input[disabled],
.hds-form .hds-form-select[disabled],
.hds-form .hds-form-checkbox[disabled] {
    background-color: var(--hds-color-mid-lightest);
}

.hds-form .hds-form-select {
    appearance: none;
    padding: .875rem var(--hds-spacing-2);
    border: 1px solid var(--hds-color-mid-lightest);
    background-color: var(--hds-color-base-lightest);
    background-image: url("/img/hds/Chevron-Down.svg");
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
}

.hds-form .hds-form-buttons {
    padding-top: var(--hds-spacing-2);
}

.hds-form .hds-form-checkbox {
    appearance: none;
    padding: var(--hds-spacing-1);
    border: 1px solid var(--hds-color-mid-lightest);
    background-color: var(--hds-color-base-lightest);
    position: relative;
    height: var(--hds-spacing-2);
    width: var(--hds-spacing-2);
}

.hds-form .hds-form-checkbox:checked::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--hds-color-dark);
    mask-image: url("/img/hds/Check.svg");
    mask-repeat: no-repeat;
    mask-size: 100%;
}

.hds-form .hds-form-required-marker {
    color: var(--hds-color-primary-dark);
    margin-right: var(--hds-spacing-1);
}



.hds-footer-menu-meta *, .hds-footer-links * {
    font-size: .9rem;
    line-height: 1.2em;
    font-weight: 400;
}

.hds-footer-links {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: var(--hds-spacing-2);
    height: fit-content;
}

.hds-footer-meta-row {
    padding-top: var(--hds-spacing-3);
    border-top: 1px solid var(--hds-color-mid-light);
}

.hds-footer-menu-meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

@media (min-width: 1024px) {
    .hds-footer-menu-meta {
        flex-direction: row;
    }
}

.hds-footer-meta {
    display: inline-flex;
    margin-right: var(--hds-spacing-4);
    margin-bottom: var(--hds-spacing-2);
    flex-wrap: nowrap;
}

.hds-footer-meta-label {
    padding-right: .5rem;
    min-width: fit-content;
}

.hds-footer-meta-value {
    font-weight: 600;
    min-width: fit-content;
}



@media (min-width: 640px) {
    .tablet\:flex-justify-between {
        justify-content: space-between;
    }
}