:root { 
    /* Border Radius */
    --ds-border-radius-xs: 0.25rem;
    --ds-border-radius-sm: 0.75rem;
    --ds-border-radius-md: 1rem;
    --ds-border-radius-lg: 2rem;
    --ds-border-radius-xl: 3rem;
    --ds-border-radius-xxl: 4rem;

    /* Drop Shadows */
    --ds-shadow-level-1: 0 1px 2px rgb(0 0 0 / 0.2), 0 1px 3px 1px rgb(0 0 0 / 0.1);
    --ds-shadow-level-2: 0 1px 2px rgb(0 0 0 / 0.3), 0 2px 6px 2px rgb(0 0 0 / 0.15); 
    --ds-shadow-level-3: 0 4px 8px 3px rgb(0 0 0 / 0.1), 0 1px 3px rgb(0 0 0 / 0.2);
    --ds-shadow-level-4: 7px 6px 13px rgb(0 0 0 / 0.02), 0 2px 5px rgb(0 0 0 / 0.1), 0 13px 20px rgb(0 0 0 / 0.1);

    /* Spacing */
    --ds-spacing-1:  0.25rem; /*   4px */
    --ds-spacing-2:  0.5rem;  /*   8px */
    --ds-spacing-3:  0.75rem; /*  12px */

    --ds-spacing-4:  1rem;    /*  16px */
    --ds-spacing-5:  1.25rem; /*  20px */
    --ds-spacing-6:  1.5rem;  /*  24px */

    --ds-spacing-7:  2rem;    /*  32px */
    --ds-spacing-8:  2.25rem; /*  36px */
    --ds-spacing-9:  2.5rem;  /*  40px */
    --ds-spacing-10: 3rem;    /*  48px */
    --ds-spacing-11: 3.5rem;  /*  56px */
    --ds-spacing-12: 4rem;    /*  64px */
    
    --ds-spacing-13: 5rem;    /*  80px */
    --ds-spacing-14: 6rem;    /*  96px */
    --ds-spacing-15: 8rem;    /* 128px */
    --ds-spacing-16: 10rem;   /* 160px */

    /* Font Size */
    --ds-font-size-xs: 0.875rem;
    --ds-font-size-sm: 1rem;
    --ds-font-size-md: 1.25rem;
    --ds-font-size-lg: 1.5rem;
    --ds-font-size-xl: 2rem;
    --ds-font-size-xxl: 2.5rem;
    --ds-font-size-xxxl: 3rem;    

    /* Line Height */
    --ds-line-height-xs: 1.25rem;
    --ds-line-height-sm: 1.5rem;
    --ds-line-height-md: 2rem;
    --ds-line-height-lg: 2.25rem;
    --ds-line-height-xl: 3rem;
    --ds-line-height-xxl: 3.75rem;
    --ds-line-height-xxxl: 4.5rem;

    /* Fonts */
    --ds-font: 'Noto Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";    
    --ds-font-alt: system-ui, sans-serif;
    --ds-icon-font: "Font Awesome 6 Pro";

    --ds-content-max-width: 1312px;
}

body {
    position: relative;
    color: var(--light-text);
    font-family: var(--ds-font-alt);

    &.original-font { font-family: var(--ds-font); }
}

section {
    padding: 4rem 0;
}

/* Set focus */
:focus-visible {
    outline: 3px solid var(--light-focus);
    outline-offset: 2px;

    .ds-light &,
    .ds-light-alt & {
        outline: 3px solid var(--light-focus);
    }
    .ds-dark &,
    .ds-dark-alt & {
        outline-color: var(--dark-focus);
    }
}

/*==----------------------------------------====
    Links
====----------------------------------------==*/
a {
    --link-decoration-style: underline;
    --link-underline-offset: 0.3em;
    --link-underline-thickness: 1px;
    
    color: var(--link-color);
    text-decoration-color: var(--link-underline);    
    text-decoration: var(--link-decoration-style);
    text-decoration-thickness: var(--link-underline-thickness);
    text-underline-offset: var(--link-underline-offset);
   
    &:hover {
        text-decoration-color: var(--link-underline-hover);
        --link-underline-thickness: 2px;
    }

    &:visited {
        &:not(.ds-btn) {
            color: var(--link-visited);
            text-decoration-color: var(--link-underline-visited);

            &:hover { 
                text-decoration-color: var(--link-underline-visited-hover); 
            }
        }
    }   

    &:has(i) {
        text-decoration: none;        

        span {
            text-decoration-color: var(--link-color);
            text-decoration: var(--link-decoration-style);
            text-decoration-thickness: var(--link-underline-thickness);
            text-underline-offset: var(--link-underline-offset);   
        }

        &:hover {
            i { --icon-color: var(--secondary-action-hover); }
        }
    }
}

a.external[href]:not(:where(
    /* Exclude hash only links */    
    [href^="#"],

    /* Exclude relative, but not double slash only links */
    [href^="/"]:not([href^="//"]),

    /* Domains to exclude */
    [href*="//www.qld.gov.au"],

    /* Sub-domains to exclude
    [href*="//health.qld.gov.au"] */
)):after {
    font-family: var(--ds-icon-font);
    font-weight: 400;
    content: '\f14c';
}


/*==----------------------------------------====
    Banner
====----------------------------------------==*/
.ds-banner {
    padding: unset;

    .ds-banner-content {
        padding: 3rem 2rem 4rem 0;

        h1 {
            max-width: 80ch;
            font-size: 2.5rem;
            line-height: 1.3em;
            font-weight: 600;
            color: var(--heading);

            &.feature-heading {
                display: grid;
                justify-content: start;
                justify-items: start;
                border-left: 0.25rem solid var(--accent);

                .heading {
                    padding: 0.5rem 1.25rem;
                    box-shadow: var(--ds-shadow-level-2);
                    color: var(--dark-heading);
                    background-color: var(--dark-background-shade);
                    box-decoration-break: clone;
                }
                .sub-heading {
                    color: var(--light-text);                    
                    background-color: var(--light-default-background);
                    font-weight: 400;
                    padding: 0.5rem 1.25rem;
                    box-shadow: var(--ds-shadow-level-2);
                    box-decoration-break: clone;
                }
            }
        }
       
        .ds-banner-cta {
            display: flex;
            align-items: center;
            gap: 2rem;
        }

        > *:not([hidden]) + * {
            margin-top: 1.5rem;
        }
    }

    .ds-banner-image {
        img {
            object-fit: cover;
            height: 100%;
        }
        &.fixed-ratio {
            img {
                object-fit: contain;
                padding: 1rem;
            }
        }
    }

    &.ds-banner-advanced {
        min-height: 344px;
    }

    &.ds-banner-no-banner {
        .ds-banner-content {
            padding: 3rem 0 2rem 0;
        }
    }
}

/*==----------------------------------------====
    Breadcrumbs
====----------------------------------------==*/
.ds-breadcrumbs {
    display: flex;
    gap: 0;

    &:not(:only-child) {
        margin-bottom: 1.5rem;
    }

    li {
        color: var(--text-muted);

        &:not(:last-child) {
            &::after {
                font-family: var(--ds-icon-font);
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 0.5rem;
                height: 1rem;
                margin: 0 0.725rem 0 0.5rem;
                font-size: 0.725rem;
                font-weight: 300;
                content: "\f054";
                color: var(--secondary-action);
            }
        }

        a {
            color: var(--link-color);

            &:visited {
                color: var(--link-color);
            }
        }
    }
}

/*==----------------------------------------====
    Call to Action
====----------------------------------------==*/
.cta-link {

}
.cta-listing {

}


/*==----------------------------------------====
    Card
====----------------------------------------==*/
.card {
    --padding: 0;

    border: 1px solid var(--light-alt-border);
    border-radius: var(--ds-border-radius-sm);
    padding: var(--padding);
    position: relative;
    isolation: isolate;

    .card-icon {
        i {
            --icon-color: var(--light-secondary-action);
            
            &:hover {
                --icon-color: var(--light-secondary-action);
            }
        }
    }

    .card-image {
        overflow: hidden;        
        outline: 1px solid var(--light-alt-border);

        img {
            object-fit: cover;
            width: 100%;
            height: 100%;
        }
    }

    .card-content {
        --padding: var(--ds-spacing-6);        

        display: grid;
        padding: var(--padding);
        
        h3.card-title {
            font-size: 1.25rem;            
            line-height: 1.5em;
            margin-bottom: 0.75em;
        }
    }

    .card-footer {
        border-top: 1px solid var(--light-default-border);
        margin-top: var(--ds-spacing-6);
        padding-top: var(--ds-spacing-6);
    }
    &.ds-dark,
    &.ds-dark-alt {
        .card-footer {
            border-top: 1px solid var(--dark-border);
        }
    }

    &.ds-card-stacked-icon {
        gap: var(--ds-spacing-6);

        .card-icon {
            display: grid;
            align-items: center;
            justify-content: center;
            padding-top: var(--ds-spacing-6);

            i {
                font-size: 4rem;
            }
        }
        .card-content {
            display: grid;
            justify-content: center;
            text-align: center;
        }
    }

    &.ds-card-single-action {
        a::after {
            position: absolute;
            inset: 0;
            content: '';
        }
        &:hover {
            box-shadow: var(--ds-shadow-level-4);

            .card-icon i {
                --icon-color: var(--light-secondary-action-hover);
            }
            
            .card-image {
                /*outline: 1px solid #fff;*/
                background-color: var(--dark-background);

                img { opacity: 0.9; }
            }
        }
    }
    
    &.ds-card-arrow,
    &.ds-card-leading-icon {
        --padding: var(--ds-spacing-6);
        display: grid;
        gap: var(--ds-spacing-6);
        align-items: center;
            
        .card-content {
            --padding: 0;
        }
    }
    &.ds-card-arrow { grid-template-columns: 1fr 4rem; }
    &.ds-card-leading-icon { grid-template-columns: 4rem 1fr; }
    
    + .card {
        margin-top: var(--ds-spacing-7);
    }
}
/* Utility class to add corner radius to image. Can be added to container or individual cards */
.image-corner-radius {
    .card-image {
        border-bottom-right-radius: 2rem;
    }
}


/*==----------------------------------------====
    Tabs
====----------------------------------------==*/
.ds-tabs-wrapper {
    --tabs-border: var(--border-color);
    max-width: 75%;

    &:not(:first-child) {
        margin-top: 3rem;
    }
    
    [role="tablist"] {        
        display: flex;
        gap: 0.25rem;

        > li {
            display: flex;
            align-items: end;
            position: relative;
            z-index: 5;

            &:has([aria-selected="true"]) {
                z-index: 10;
            }
        }

        a {
            display: flex;
            align-items: center;
            color: var(--link-color);
            background-color: var(--background-shade);
            text-decoration-color: transparent;
            padding: 0.5rem 1.25rem;
            border-radius: 0.25rem 0.25rem 0 0;
            height: 2.75rem;
            cursor: pointer;
            
            &[aria-selected="true"] {
                box-shadow: 0 1px 0 0 var(--background-color), 0 0 0 1px var(--tabs-border);
                background-color: var(--background-color);
                color: var(--heading);
                font-weight: 700;
                height: 3rem;
                pointer-events: none;
                user-select: none;                

                .ds-default &,
                .ds-light &,
                .ds-light-alt & {
                    box-shadow: 0 1px 0 0 var(--background-color), 0 0 0 1px var(--light-alt-border);
                }
                .ds-dark &,
                .ds-dark-alt & {
                    box-shadow: 0 1px 0 0 var(--background-color), 0 0 0 1px var(--border-color);
                }       

                span {
                    position: relative;

                    &::after {
                        position: absolute;
                        left: 0;
                        bottom: -0.8rem;
                        width: 100%;
                        height: 0.25rem;
                        background-color: var(--accent);
                        border-radius: 0.25rem 0.25rem 0 0;
                        content: "";
                    }
                }
            }

            &:hover {
                color: var(--primary-action-text);
                background-color: var(--primary-action-hover);
                text-decoration-color: var(--primary-action-text);
            }
        }
    }

    .ds-tabs-content {
        margin-top: 1px;
        padding: 1.5rem;

        > div > *:not([hidden]) + * { margin-top: 1.5rem; }

        .ds-default &,
        .ds-light &,
        .ds-light-alt & {
            box-shadow: 0 0 0 1px var(--light-alt-border);
        }
        .ds-dark &,
        .ds-dark-alt & {
            box-shadow: 0 0 0 1px var(--border-color);
        }
    }
}

/*==----------------------------------------====
    News Listing
====----------------------------------------==*/
.filter-panel {
    background-color: var(--background-shade);
    border: 1px solid var(--border-color);
    padding: 1rem;
    margin-bottom: 1.5rem;

    > * {
        display: grid;
    }
}
.article-count {
    margin-bottom: 1.5rem;
}
.news-listing {
    .card-list {
        margin-bottom: 1.5rem;
    }
}


/*==----------------------------------------====
    Tables
====----------------------------------------==*/
table,
.ds-table {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;

    caption {
        padding: 0.75rem;
        font-size: 1.25rem;
        line-height: 1.6rem;
        font-weight: 600;
        text-align: left;
        color: var(--heading);
        box-shadow: inset 0 -1px 0 var(--border-color);

        .ds-caption-text {
            display: block;
            font-size: .875rem;
            line-height: 1.4rem;
            font-weight: 400;
            color: var(--text-muted);
        }
    }
    
    thead,
    tfoot {
        th {
            font-weight: 600;
            padding: 1.25rem 0.75rem;
            color: var(--heading);
            text-align: left;
        }
    }

    thead tr { box-shadow: inset 0 -2px 0 var(--accent); }
    tfoot tr { box-shadow: inset 0 2px 0 var(--accent); }
    
    &.striped {
        tbody tr:nth-child(odd) { 
            background-color: var(--background-shade); 
        }
    }

    tbody {
        tr {
            box-shadow: inset 0 -1px 0 var(--border-color);
        }
        td, th {
            padding: 0.75rem;
        }
    }
}

.ds-table-contained {
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
}

.ds-table-content-scroll {
    overflow: auto;
    max-width: 100%;
    max-height: 1000px;

    table {
        caption {
            background-color: var(--background-color);
            position: sticky;
            top: 0;
        }
        
        thead {
            background-color: var(--background-color);
            position: sticky;
            top: 76px;
        }
    }
}

/*==----------------------------------------====
    DataTables
====----------------------------------------==*/
.datatable-container {
    .datatable-search {
        width: 100%;
        margin-bottom: 2rem;
    }
    
    table > thead > tr > th {
        cursor: pointer;
        user-select: none;

        &::after {
            font-family: var(--ds-icon-font);
            margin-left: 0.5rem;
            content: "\e60d";
            opacity: 0.25;
        }

        &[data-sort-ascending="true"]::after {
            content: "\f107";
            opacity: 1;
        }
        &[data-sort-descending="true"]::after {
            content: "\f106";
            opacity: 1;
        }
    }
}

/*==----------------------------------------====
    Tags
====----------------------------------------==*/
.ds-tag-list {
    --tag-padding: 0 0.5rem;
    --tag-font-size: 0.875rem;

    display: flex;
    gap: 0.5rem;
    line-height: 1.5rem;

    &.large-tags {
        --tag-font-size: 1rem;
        --tag-padding: 0.5rem 1rem;
    }    

    > li {
        &:not(:has(a)) {
            color: var(--text-muted);
            border: 1px solid var(--border-color);
            font-size: var(--tag-font-size);
            padding: var(--tag-padding);
            border-radius: 2rem;
        }

        &.info-tag {
            background-color: var(--background-shade);
            border-color: transparent;
            color: var(-text-muted);

            i { --icon-color: inherit; }
        }

        &.filter-tag {
            --tag-font-size: 1rem;
            --tag-padding: 0.5rem 1rem;            
            
            display: flex;
            align-items: center;
            gap: 1rem;
            color: var(--text-color);
        }

        a {
            display: block;
            color: var(--primary-action-hover);
            border: 1px solid var(--primary-action-hover);
            background-color: transparent;
            font-size: var(--tag-font-size);
            padding: var(--tag-padding);
            border-radius: 2rem;
            text-decoration: none;
            
            &:hover {
                background-color: var(--primary-action-hover);
                text-decoration: underline;
                text-decoration-color: var(--primary-action-text);
                color: var(--primary-action-text);
            }

            .ds-dark &,
            .ds-dark-alt & {
                &:not(:hover) {
                    border-color: var(--link-color);
                    color: var(--link-color);
                }
            }
        }

        .filter-close {
            padding: 0;
            background-color: transparent;
            min-width: auto;
            line-height: 1;
            border-style: none;
            width: 1.25rem;

            &::after {                
                display: flex;
                justify-content: center;
                align-items: center;
                font-family: var(--ds-icon-font);
                font-size: 1.25rem;
                content: "\f057";
                color: var(--secondary-action);
                font-size: 1.25rem;
                font-weight: 300;
            }

            &:hover {                
                box-shadow: none;

                &::after {
                    font-weight: 600;
                    color: var(--secondary-action-hover);
                }
            }
        }
    }       
}

/*==----------------------------------------====
    Forms
====----------------------------------------==*/
.ds-form {
    grid-template-rows: repeat(3, auto);

    .form-control {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 2;
        row-gap: 0.25rem;
        align-items: start;

        &.form-error {
            grid-row: span 3;
        }
    }
    
    .disabled,
    :disabled,
    [disabled],
    [aria-disabled] {
        opacity: .5
    }
}

fieldset {
    border-style: none;
}

legend {
    font-weight: 600;
}

label {
    display: block;
    color: var(--text-color);
    font-weight: 600;

    &.required::before {
        content: "*";
        color: var(--ds-error);
        margin-right: var(--ds-spacing-1);
    }
    &.optional::after {
        content: "(Optional)";
        font-size: 0.875rem;
        margin-left: 0.25rem;
        color: var(--text-color);
        font-weight: 400;
    }

    &:has(input) {
        display: flex;
        gap: 0.75rem;
        align-items: center;
        cursor: pointer;
    }
    
    &[for] {
        cursor: pointer;
    }
}

input[type="date"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select,
textarea {
    --input-bg: var(--background-color);
    --input-text: var(--text-color);
    --input-border: var(--light-alt-border);
    
    line-height: 1.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--ds-border-radius-xs);                    
    color: var(--input-text);
    border: 2px solid var(--input-border);
    background-color: var(--input-bg);

    .ds-dark &,
    .ds-dark-alt & {
        --input-border: var(--dark-alt-border);
    }

    &:hover {
        --input-border: var(--primary-action-hover);
        --input-bg: var(--background-shade);
    }

    &:focus {
        --input-text: var(--light-text);
        --input-bg: var(--light-default-background);
        --input-border: var(--light-default-border);
    }

    .form-style-filled & {
        --input-bg: var(--background-shade);
        --input-border: var(--light-alt-border);

        border-width: 0 0 2px 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;

        &:hover {
            --input-bg: var(--background-shade);
            --input-border: var(--primary-action-hover);
        }

        &:focus {
            border-width: 1px;
            border-radius: var(--ds-border-radius-xs);
            --input-bg: var(--light-default-background);
            --input-border: var(--light-default-border);
        }
        
        .ds-dark &,
        .ds-dark-alt & {
            --input-border: var(--dark-alt-border);
        }    
    }

    .form-error & {
        --input-border: var(--ds-error);
    }
    .form-success & {
        --input-border: var(--ds-success);
    }
}

select {
    padding: 0.75rem 1rem;
}

input[type="checkbox"],
input[type="radio"] {
    --size: 2rem;
    --border: var(--light-alt-border);
    --border-width: 2px;

    width: var(--size);
    height: var(--size);
    cursor: pointer;

    &.small {
        --size: 1rem;
    }

    &:checked,
    &[checked] {
        accent-color: var(--light-text);
        z-index: 10;
    }
}

.disabled,
:disabled,
[disabled],
[aria-disabled] {
    cursor: unset;
    pointer-events: none;
    user-select: none;
}

.ds-control-group {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
}

/*==----------------------------------------====
    Images
====----------------------------------------==*/
.ds-image {
    grid-column: image;
    grid-row: 1;
    border-radius: 0.5rem;
    overflow: hidden;

    &.ds-image {
        &.image-align-right {
            float: right;
            max-width: 40%;
            margin: 0 0 0 2.5rem;
        }
    }        

    img {            
        object-fit: cover;
        height: auto;

        &::after {
            display: block;
            clear: both;
            content: '';
        }
    }

    figcaption {
        background-color: var(--light-default-background-shade);
        font-size: var(--ds-font-size-xs);
        color: var(--light-text-muted);
        padding: var(--ds-spacing-2) var(--ds-spacing-3);
        line-height: 1.4rem;
    }
}


/*==----------------------------------------====
    Loading Spinner
====----------------------------------------==*/
.ds-loading-spinner {
    --spinner-text: var(--light-heading);
    --spinner-wheel-color: var(--light-accent);

    .spinner-wheel {
        color: var(--spinner-wheel-color);
    }
    .spinner-text {
        max-width: 80ch;
        font-size: 1.25rem;
        font-weight: 600;        
        color: var(--spinner-text);
    }

    &.stacked {
        display: grid;
        justify-content: center;
    }

    .ds-dark &,
    .ds-dark-alt & {
        --spinner-text: var(--dark-heading);
        --spinner-wheel-color: var(--dark-accent);
    }
}

/*==----------------------------------------====
    Buttons
====----------------------------------------==*/
button,
.ds-btn {
    --button-bg: var(--button-primary);
    --button-text: var(--button-primary-text);
    --button-icon: var(--button-text);
    --button-border: var(--button-primary);
    --button-shadow: none;
    --button-underline: none;    

    display: inline-flex;
    align-items: center;    
    justify-content: center;
    gap: var(--ds-spacing-3);    

    user-select: none;
    line-height: 1.5rem;
    min-width: 8.75rem;
    padding: 0.625rem 1.5rem;
    text-decoration: none;
    cursor: pointer;
    
    color: var(--button-text);
    background-color: var(--button-bg);
    border: 3px solid var(--button-border);
    box-shadow: var(--button-shadow);
    text-decoration-color: var(--button-underline);
    border-radius: var(--ds-border-radius-xs);
    
    span { text-decoration-color: transparent; }

    i {
        color: var(--button-icon);

        display: grid;
        align-items: center;
        justify-content: center;
        width: 1rem;
        aspect-ratio: 1;
    }
    
    &:hover {
        --button-bg: var(--button-primary-hover);
        --button-border: transparent;
        --button-shadow: var(--ds-shadow-level-1);

        i { --button-icon: var(--primary-action-text); }

        *:not(i) {
            text-decoration: underline;
            text-decoration-thickness: 2px;
        }
    }

    &:active {
        --button-bg: var(--background-shade);
        --button-text: var(--heading);
        --button-border: transparent;
        --button-shadow: var(--ds-shadow-level-1);

        span { text-decoration-color: transparent; }

        i { --button-icon: inherit; }
    }
    
    &:visited {
        color: var(--button-primary-text);
    }

    &.disabled, &:disabled, &[disabled], &[aria-disabled] {
        --button-bg: var(--light-alt-background-shade);
        --button-border: none;
        --button-shadow: none;

        color: var(--text-muted);        

        span { text-decoration-color: transparent; }

        i { --button-icon: var(--text-muted); }

        .ds-dark &, 
        .ds-dark-alt & { --button-bg: rgb(224 224 224 / 0.1) }
    }

    
    &.ds-button-secondary {
        --button-bg: transparent;
        --button-text: var(--link-color);
        --button-border: var(--secondary-action);

        color: var(--button-text);
        
        i { --button-icon: var(--secondary-action); }

        span { text-decoration-color: transparent; }
        
        &:hover {
            --button-bg: transparent;
            --button-border: var(--secondary-action-hover);
            
            i { --button-icon: var(--secondary-action-hover); }
            
            span { text-decoration-color: var(--link-color); }
        }

        &:active {
            --button-bg: var(--background-shade);
            --button-text: var(--heading);
            --button-border: transparent;
            --button-shadow: var(--ds-shadow-level-1);
            
            font-weight: 500;

            span { 
                text-decoration-color: transparent;
            }

            i { --button-icon: inherit; }
        }
        
        &.disabled, &:disabled, &[disabled], &[aria-disabled] {
            --button-bg: var(--light-alt-background-shade);
            --button-border: transparent;
            
            color: var(--text-muted);        

            i { color: var(--text-muted); }

            span { text-decoration-color: transparent; }

            .ds-dark &, 
            .ds-dark-alt & { 
                --button-bg: transparent;
                --button-border: rgb(224 224 224 / 0.1);
            }
        }
    }  


    &.ds-button-tertiary {
        --button-bg: none;
        --button-text: var(--link-color);
        --button-border: transparent;
        --button-shadow: none;

        span { text-decoration-color: transparent; }
        
        i { --button-icon: var(--secondary-action); }
        
        &:visited {
            color: var(--link-text);
            --button-border: transparent;
        }
        
        &:hover {
            --button-bg: var(--background-shade);
            --button-shadow: none;
            
            span { text-decoration-color: var(--link-underline-hover); }
        }

        &:active {
            --button-text: var(--heading);
            --button-border: transparent;
            --button-shadow: var(--ds-shadow-level-1);
            
            font-weight: 500;

            span { 
                text-decoration-color: transparent; 
            }
        }

        &.disabled, &:disabled, &[disabled], &[aria-disabled] {
            --button-bg: transparent;
            --button-border: transparent;

            color: var(--text-muted);

            i { --button-icon: inherit; }
        }
    }
}


/*==----------------------------------------====
    Grid
====----------------------------------------==*/
.grid,
.card-list {
    --gap: 2rem;
    
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    container-type: inline-size;
    container-name: grid;
    gap: var(--gap);

    &.gap-2 { --gap: 2rem;  }

    .col-1  { grid-column: span 1 / auto; }
    .col-2  { grid-column: span 2 / auto; }
    .col-3  { grid-column: span 3 / auto; }
    .col-4  { grid-column: span 4 / auto; }
    .col-5  { grid-column: span 5 / auto; }
    .col-6  { grid-column: span 6 / auto; }
    .col-7  { grid-column: span 7 / auto; }
    .col-8  { grid-column: span 8 / auto; }
    .col-9  { grid-column: span 9 / auto; }
    .col-10 { grid-column: span 10 / auto; }
    .col-11 { grid-column: span 11 / auto; }
    .col-12 { grid-column: span 12; }
        
    /* Tablet */
    @container grid (max-width: 991px) {
        > [class*="col"] {
            grid-column: span 6 / auto;
        }

        /* Column overrides for mobile */
        .t-col-1  { grid-column: span 1 / auto; }
        .t-col-2  { grid-column: span 2 / auto; }
        .t-col-3  { grid-column: span 3 / auto; }
        .t-col-4  { grid-column: span 4 / auto; }
        .t-col-5  { grid-column: span 5 / auto; }
        .t-col-6  { grid-column: span 6 / auto; }
        .t-col-7  { grid-column: span 7 / auto; }
        .t-col-8  { grid-column: span 8 / auto; }
        .t-col-9  { grid-column: span 9 / auto; }
        .t-col-10 { grid-column: span 10 / auto; }
        .t-col-11 { grid-column: span 11 / auto; }
        .t-col-12 { grid-column: span 12; }        
    }

    /* Mobile */
    @container grid (width < 399px) {
        > [class*="col"] {
            grid-column: span 12;
        }

        /* Column overrides for mobile */
        .m-col-1  { grid-column: span 1 / auto; }
        .m-col-2  { grid-column: span 2 / auto; }
        .m-col-3  { grid-column: span 3 / auto; }
        .m-col-4  { grid-column: span 4 / auto; }
        .m-col-5  { grid-column: span 5 / auto; }
        .m-col-6  { grid-column: span 6 / auto; }
        .m-col-7  { grid-column: span 7 / auto; }
        .m-col-8  { grid-column: span 8 / auto; }
        .m-col-9  { grid-column: span 9 / auto; }
        .m-col-10 { grid-column: span 10 / auto; }
        .m-col-11 { grid-column: span 11 / auto; }
        .m-col-12 { grid-column: span 12; }
    }
}


/*==----------------------------------------====
    Icons
====----------------------------------------==*/
i[class*="ds-icon-"] {
    display: grid;
    justify-content: center;
    align-items: center;
    width: var(--ds-icon-width, 1.5rem);
    aspect-ratio: 1;

    i { 
        font-size: var(--ds-icon-fs, 1rem); 
    }

    &.round {
        border-radius: 50%;
        background-color: var(--light-default-background-shade);                
    }
}
.ds-icon-xs  { --ds-icon-width: 1rem;    &::before { font-size: 0.5rem; } }
.ds-icon-sm  { --ds-icon-width: 1.25rem; &::before { font-size: 0.75rem; } }
.ds-icon-md  { --ds-icon-width: 1.5rem;  &::before { font-size: 1rem; } }
.ds-icon-lg  { --ds-icon-width: 2rem;    &::before { font-size: 1.75rem; } }
.ds-icon-xl  { --ds-icon-width: 4rem;    &::before { font-size: 2.25rem; } }
.ds-icon-xxl { --ds-icon-width: 8rem;    &::before { font-size: 3.75rem; } }


/*==----------------------------------------====
    Typography
====----------------------------------------==*/
[class*="ds-heading-"] {
    --margin-top: 0;
    --line-height: 1.5rem;
    
    font-weight: var(--ds-font-weight-600);
    font-size: var(--ds-font-size-md);
    line-height: var(--line-height);
    margin-top: var(--margin-top);
    margin-bottom: var(--ds-spacing-6);

    &.ds-heading-no-space {
        --line-height: 1rem;
    }
}

.ds-heading-xxxl { 
    --font-size: var(--ds-font-size-xxxl); 
    --line-height: var(--ds-line-height-xxxl);    
    
    &.ds-heading-space {
        --line-height: var(--ds-line-height-xxl);
    }
}
.ds-heading-xxl {
    --font-size: var(--ds-font-size-xxl);
    --line-height: var(--ds-line-height-xxl);
    
    * + & { --margin-top: var(--ds-spacing-10); }
}
.ds-heading-xl {
    --font-size: var(--ds-font-size-xl);
    --line-height: var(--ds-line-height-xl);

    * + & { --margin-top: var(--ds-spacing-8); }
}
.ds-heading-lg {
    --font-size: var(--ds-font-size-lg);
    --line-height: var(--ds-line-height-lg);

    * + & { --margin-top: var(--ds-spacing-7); }
}
.ds-heading-md {
    --font-size: var(--ds-font-size-md);
    --line-height: var(--ds-line-height-md);

    * + & { --margin-top: var(--ds-spacing-7); }
}
.ds-heading-sm {
    --font-size: var(--ds-font-size-sm);
    --line-height: var(--ds-line-height-sm);

    * + & { --margin-top: var(--ds-spacing-7); }
}
.ds-heading-xs {
    --font-size: var(--ds-font-size-xs);
    --line-height: var(--ds-line-height-xs);

    * + & { --margin-top: var(--ds-spacing-7); }
}

h2, h3, h4, h5, h6 {
    --heading-color: var(--light-heading);
    
    color: var(--heading-color);
    max-width: 80ch;
    font-weight: 600;        

    .ds-dark &,
    .ds-dark-alt & {
        --heading-color: var(--dark-heading);
    }
}

main {
    h2, .h2 {
        font-size: 2rem;
        line-height: 1.25rem;
    }
    
    h3, .h3 {
        font-size: 1.5rem;
        line-height: 1.33333333rem;
    }
    
    h4, .h4 {
        font-weight: 600;
    }
    ul:not([class]) {
        padding-left: 1.25rem;
    }
}

.ds-abstract {
    line-height: 1.5em;
    font-size: 1.5rem;
    font-weight: 400;
    max-width: 46rem;
    margin-top: 1em;
}

/* Hoot */
main > section {
    > *:not(.sr-only) + * {
        margin-top: var(--ds-spacing-6);
    }

    > *:not(.sr-only) + h2,    
    > *:not(.sr-only) + h3 {
        margin-top: 3rem;
    }
}

ul, ol {
    display: grid;
    gap: var(--ds-spacing-2);
}

hr,
.ds-hr {
    --rule-size: 1px;
    --rule-color: var(--light-default-border);
    --rule-margin: 1rem calc(1rem - 1px);

    margin: var(--rule-margin);
    height: var(--rule-size);
    background-color: var(--rule-color);
    border-style: none;

    &.medium {
        --rule-size: 2px;
        --rule-margin: calc(1.5rem - 1px) calc(1.5rem - 1px);
    }
    
    &.large {
        --rule-size: 2px;
        --rule-margin: calc(2rem - 1px) 0;
    }

    .ds-light & { --rule-color: var(--light-border); }
    .ds-light-alt & { --rule-color: var(--light-alt-border); }
    .ds-dark & { --rule-color: var(--dark-border); }
    .ds-dark-alt & { --rule-color: var(--dark-alt-border); }
}

strong {
    font-weight: 600;
}

i {
    --icon-color: var(--secondary-action);
    
    color: var(--icon-color);
}

dl {
    display: grid;
    gap: 0.5rem;
    color: var(--text-color);

    dt {
        font-weight: bold;
    }

    dd {
        border-left: solid var(--text-color);
        padding-left: 0.5rem;
    }
}

.caption {
    font-size: .875rem;
    line-height: 1.4rem;
    font-weight: 400;
    color: var(--text-muted);
}

/*==----------------------------------------====
    Link Lists
====----------------------------------------==*/
.ds-link-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    a:has(i) {
        text-decoration: none;
        
        span {
            text-decoration: underline;
            text-decoration-thickness: 1px;            
        }
        
        &:hover {
            span {
                text-decoration-thickness: 2px;
                text-decoration-color: var(--dark-hover-underline);
            }
        }
    }
    
    &.inline {
        flex-direction: row;
    }
}

/*==----------------------------------------====
    Callout
====----------------------------------------==*/
.ds-callout {
    padding: 1.5rem;
    background-color: var(--background-shade);
    border-left: 0.25rem solid var(--accent);

    *:not(.sr-only) + * {
        margin-top: 1.5rem;
    }

    &.calendar-event {        
        .event-time {
            display: block;
            margin-top: 0.5rem;
            font-weight: 600;
            font-size: 2rem;
            line-height: 1.25em;
        }
        .event-name {
            margin-top: 0.5rem;
            font-size: 2rem;
            line-height: 1.25em;
        }
    }
    
}

/*==----------------------------------------====
    Blockquote
====----------------------------------------==*/
.ds-blockquote {
    padding-left: 1.375rem;
    border-left: 0.25rem solid var(--accent);

    blockquote {
        color: var(--heading);
        font-size: 1.25rem;
        line-height: 1.4em;
        font-weight: 600;
    }
    figcaption {
        color: var(--text-muted);
        font-size: 0.875rem;
        line-height: 1.4em;
        margin-top: 0.625rem;
    }
}

/*==----------------------------------------====
    Page Alerts
====----------------------------------------==*/
.page-alert {
    --alert-color: var(--ds-info);
    --alert-icon-color: white;
    
    display: grid;
    grid-template-columns: 3rem 1fr;
    background-color: var(--light-default-background);
    color: var(--light-text);
    border-style: solid;
    border-width: 2px;
    border-radius: 0.25rem;
    border-color: var(--alert-color);
    max-width: 48rem;

    a {
        color: var(--light-link);
        text-decoration-color: var(--light-link);
    }

    .alert-icon {
        color: white;
        display: grid;
        align-items: center;
        justify-content: center;
        background-color: var(--alert-color);

        &::before {
            font-family: var(--ds-icon-font);
            font-weight: 300;
            font-size: 1.25rem;
            color: var(--alert-icon-color);
            content: var(--alert-icon);            
        }
    }

    .alert-content {
        padding: 1rem;

        * + * {
            margin-top: 1.25rem;
        }    
    }

    .alert-heading {
        font-size: 1.5rem;
        font-weight: 600;
        color: var(--light-heading);
    }

    &.info { 
        --alert-color: var(--ds-info);
        --alert-icon: "\f30f";
    }
    &.success { 
        --alert-color: var(--ds-success);
        --alert-icon: "\f058";
    }
    &.error { 
        --alert-color: var(--ds-error);
        --alert-icon: "\f057";
    }
    &.warning { 
        --alert-color: var(--ds-warning);
        --alert-icon: "\f071";
        --alert-icon-color: var(--light-text);
    }
}

/*==----------------------------------------====
    In Page Navigation
====----------------------------------------==*/
.page-navigation-wrapper {
    padding-left: 1.5rem;
    border-left: 0.25rem solid var(--link-color);

    h2 {
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.5;
    }

    .ds-link-list {
        margin-top: 1.5rem;
    }
}

/*==----------------------------------------====
    Pagination
====----------------------------------------==*/
.ds-pagination {
    --pagination-icon: var(--primary-action);
    --pagination-border: var(--border-color);
    --pagination-border-hover: var(--secondary-action);
    
    display: flex;
    gap: 0.75rem;
    margin-top: 3rem;
    justify-content: center;
    
    > li {
        display: flex;
        justify-content: center;
        align-items: center;

        * {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        > a {
            display: flex;
            gap: 0.5rem;
            color: var(--link-color);
            box-shadow: inset 0 0 0 1px var(--pagination-border);
            height: 2rem;
            padding: 0 0.625rem;
            min-width: 2rem;
            border-radius: var(--ds-border-radius-xs);
            text-decoration: none;
            font-weight: 500;

            &:hover {
                box-shadow: inset 0 0 0 2px var(--pagination-border-hover);
            }
        }
        &.active {
            a {
                color: var(--primary-action-text);
                background-color: var(--primary-action);
                --pagination-border: transparent;
                
                &:hover {
                    background-color: var(--primary-action-hover);
                    --pagination-border-hover: transparent;
                }
            }
        }
        &.disabled {
            a {
                background-color: var(--light-alt-background-shade);
        
                color: var(--text-muted);
            }
        }
        &.ellipsis {                        
            width: 2rem;
            height: 2rem;

            &::after {
                font-family: var(--ds-icon-font);
                font-size: 1.725rem;                
                font-weight: 300;
                color: var(--text-color);
                content: "\f141";
            }
        }

        .page-prev,
        .page-next {
            box-shadow: none;
            font-weight: 400;

            &:hover {
                box-shadow: none;

                span {
                    text-decoration: underline;
                }
            }

            &::before,
            &::after {
                font-family: var(--ds-icon-font);
                width: 1rem;
                font-weight: 300;
                color: var(--icon-color);
            }

            .ds-dark &,
            .ds-dark-alt & {
                --icon-color: var(--link-color);
            }
        }
        .page-prev::before { content: '\f060'; }        
        .page-next::after { content: '\f061'; }    
    }
}

/*==----------------------------------------====
    Link Column
====----------------------------------------==*/
.ds-link-column {
    --link-columns: 2;
    --link-column-border: var(--border-color);
    --link-column-gap: 2rem;

    position: relative;
    columns: var(--link-columns);
    column-gap: var(--link-column-gap);
    column-fill: balance-all;
    display: block;
    
    &.link-columns-1 { --link-columns: 1; }
    &.link-columns-2 { --link-columns: 2; }
    &.link-columns-3 { --link-columns: 3; }
    &.link-columns-4 { --link-columns: 4; }

    &::after {
        position: absolute;
        height: 1px;
        width: 100%;
        bottom: 0;
        left: 0;
        box-shadow: 0 1px 0 0 var(--background-color);
        content: "";
    }

    a {
        --link-decoration-style: none;
        
        color: var(--link-color);
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        text-decoration: none;
        padding: 1rem 0.5rem 1rem 0.25rem;
        transition: padding 0.1s ease-in;
        font-size: 1.125rem;
        font-weight: 500;        
        line-height: 1.5rem;
        box-shadow: 0 1px 0 0 var(--link-column-border);
        
        &::after {
            font-family: var(--ds-icon-font);
            width: 1.25rem;
            height: 1.5rem;
            font-size: 1.25rem;
            font-weight: 300;
            color: var(--secondary-action);
            content: '\f061';
        }        

        &:hover {
            padding-right: 0;

            span {
                text-decoration: underline;
                text-decoration-thickness: 2px;
                text-decoration-color: var(--link-underline-hover);
            }

            &::after {
                color: var(--secondary-action);
            }
        }
    }
    p {
        margin-top: 1.5rem;
    }

    &.cards {
        --link-columns: 1;
        
        display: grid;
        width: 70%;
        gap: 1rem;   
        
        a {
            border: 1px solid var(--border-color);
            border-radius: var(--ds-border-radius-sm);
            background-color: var(--light-default-background);
            color: var(--light-link);
            padding: 1.5rem;
            font-size: 1.25rem;
            line-height: 1.4em;

            &::after {
                color: var(--light-secondary-action);
                font-size: 1.5rem;
            }

            span {
                text-decoration: underline;
                text-decoration-thickness: 1px;
            }

            &:hover {
                padding-right: 1.25rem;
                
                span {
                    text-decoration-color: var(--light-link);
                    text-decoration-thickness: 2px;
                }
                
                &::after {
                    color: var(--light-secondary-action-hover);
                }
            }
        }
    }
}

/*==----------------------------------------====
    Accordions
====----------------------------------------==*/
.accordion {    
    max-width: 47rem;

    .accordion-toggle {
        display: flex;
        justify-content: end;
        font-size: 0.825rem;
        padding: 0.5rem;        
    }

    > details {
        > summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            list-style: none;
            cursor: pointer;
            background-color: var(--background-shade);
            font-size: 1.25rem;
            color: var(--link-color);
            padding: 1rem 1.25rem;
            border: 1px solid var(--border-color);
            border-bottom-style: none;
            
            span {
                text-decoration: underline;
                text-underline-offset: 0.3rem;
                text-decoration-thickness: 1px;
            }
            
            &::after {
                font-family: var(--ds-icon-font);
                font-size: 1.5rem;
                font-weight: 300;
                content: "\f078";
                color: var(--secondary-action);
                transition: rotate 0.15s ease;
            }

            &:hover {
                span {
                    text-decoration-thickness: 2px;
                }
                &::after {
                    color: var(--secondary-action-hover);
                }
            }
        }

        &[open] {
            summary::after {
                rotate: 180deg;
            }
        }
        
        > .accordion-content {
            padding: 1rem 1.25rem;
            border: 1px solid var(--border-color);
            border-width: 1px 1px 0 1px;

            * + * {
                margin-top: 1.5rem;
            }
        }

        &:last-child {
            > .accordion-content {
                border-width: 0 1px 1px 1px;
            }
        }
    
        &:last-of-type {
            summary {
                border-bottom-style: solid;
            }
        }

    }    
}

/*==----------------------------------------====
    Page Footer
====----------------------------------------==*/
.page-footer {
    display: flex;
    gap: 0.5rem;

    .title {
        font-weight: 600;
    }
}

/*==----------------------------------------====
    QGDS Widgets
====----------------------------------------==*/
.ds-widgets {
    position: fixed;
    bottom: 1rem;
    right: 0.75rem;
    z-index: 100;

    .back-to-top {
        --button-shadow: var(--ds-shadow-level-1);
        --button-border: none;

        color: var(--light-link);
        background-color: var(--light-alt-background);
        
        i { --icon-color: var(--light-secondary-action); }
        
        &:active {
            background-color: var(--light-alt-background-shade);
        };
        &:active {
            span {
                text-decoration: none;
            }
        }
    }
}

/*==----------------------------------------====
    Shadows
====----------------------------------------==*/
.ds-shadow-l1 { box-shadow: var(--ds-shadow-level-1); }
.ds-shadow-l2 { box-shadow: var(--ds-shadow-level-2); }
.ds-shadow-l3 { box-shadow: var(--ds-shadow-level-3); }
.ds-shadow-l4 { box-shadow: var(--ds-shadow-level-4); }

/*==----------------------------------------====
    Border Radius
====----------------------------------------==*/
.ds-border-radius-xs { border-radius: var(--border-radius-xs); };
.ds-border-radius-sm { border-radius: var(--border-radius-sm); };
.ds-border-radius-md { border-radius: var(--border-radius-md); };
.ds-border-radius-lg { border-radius: var(--border-radius-lg); };
.ds-border-radius-xl { border-radius: var(--border-radius-xl); };
.ds-border-radius-xxl { border-radius: var(--border-radius-xxl); };

/*==----------------------------------------====
    Aspect Ratio
====----------------------------------------==*/
.ds-aspect-ratio-1    { aspect-ratio: 1; }
.ds-aspect-ratio-1-2  { aspect-ratio: 1/2; }
.ds-aspect-ratio-2-3  { aspect-ratio: 2/3; }
.ds-aspect-ratio-3-2  { aspect-ratio: 3/2; }
.ds-aspect-ratio-3-4  { aspect-ratio: 3/4; }
.ds-aspect-ratio-4-3  { aspect-ratio: 4/3; }
.ds-aspect-ratio-16-9 { aspect-ratio: 16/9; }

/*==----------------------------------------====
    Font Size
====----------------------------------------==*/
.ds-font-size-xs   { font-size: var(--ds-font-size-xs); }
.ds-font-size-sm   { font-size: var(--ds-font-size-sm); }
.ds-font-size-md   { font-size: var(--ds-font-size-md); }
.ds-font-size-lg   { font-size: var(--ds-font-size-lg); }
.ds-font-size-xl   { font-size: var(--ds-font-size-xl); }
.ds-font-size-xxl  { font-size: var(--ds-font-size-xxl); }
.ds-font-size-xxxl { font-size: var(--ds-font-size-xxxl);}

/*==----------------------------------------====
    Font Weight
====----------------------------------------==*/
.ds-font-weight-100 { font-weight: var(--ds-font-weight-100); }
.ds-font-weight-200 { font-weight: var(--ds-font-weight-200); }
.ds-font-weight-300 { font-weight: var(--ds-font-weight-300); }
.ds-font-weight-400 { font-weight: var(--ds-font-weight-400); }
.ds-font-weight-500 { font-weight: var(--ds-font-weight-500); }
.ds-font-weight-600 { font-weight: var(--ds-font-weight-600); }
.ds-font-weight-700 { font-weight: var(--ds-font-weight-700); }
.ds-font-weight-800 { font-weight: var(--ds-font-weight-800); }
.ds-font-weight-900 { font-weight: var(--ds-font-weight-900); }

/*==----------------------------------------====
    Line Height
====----------------------------------------==*/
.ds-line-height-xs { line-height: var(--ds-line-height-xs); }
.ds-line-height-sm { line-height: var(--ds-line-height-sm); }
.ds-line-height-md { line-height: var(--ds-line-height-md); }
.ds-line-height-lg { line-height: var(--ds-line-height-lg); }
.ds-line-height-xl { line-height: var(--ds-line-height-xl); }
.ds-line-height-xxl { line-height: var(--ds-line-height-xxl); }
.ds-line-height-xxxl { line-height: var(--ds-line-height-xxxl); }

/*==----------------------------------------====
    Custom Widths
====----------------------------------------==*/
.w-5   { width: 5%; }
.w-10  { width: 10%; }
.w-15  { width: 15%; }
.w-20  { width: 20%; }
.w-25  { width: 25%; }
.w-30  { width: 30%; }
.w-33  { width: 33.33333333%; }
.w-35  { width: 35%; }
.w-40  { width: 40%; }
.w-45  { width: 45%; }
.w-50  { width: 50%; }
.w-55  { width: 55%; }
.w-60  { width: 60%; }
.w-65  { width: 65%; }
.w-66  { width: 66.66666666%; }
.w-70  { width: 70%; }
.w-75  { width: 75%; }
.w-80  { width: 80%; }
.w-85  { width: 85%; }
.w-90  { width: 90%; }
.w-95  { width: 95%; }
.w-100 { width: 100%; }

/*==----------------------------------------====
    Element Branding
====----------------------------------------==*/
.ds-default {
    --background-color: var(--light-default-background);
    --background-shade: var(--light-default-background-shade);
    --border-color: var(--light-default-border);

    background-color: var(--background-color);
    border-color: var(--border-color);
    color: var(--text-color);
}
.ds-light {
    --background-color: var(--light-background);
    --background-shade: var(--light-background-shade);
    --border-color: var(--light-border);

    background-color: var(--background-color);
    border-color: var(--border-color);
    color: var(--text-color);
}
.ds-light-alt {
    --background-color: var(--light-alt-background);
    --background-shade: var(--light-alt-background-shade);
    --border-color: var(--light-alt-border);

    background-color: var(--background-color);
    border-color: var(--border-color);
    color: var(--text-color);
}
.ds-dark {
    --background-color: var(--dark-background);
    --background-shade: var(--dark-background-shade);
    --border-color: var(--dark-border);

    background-color: var(--background-color);
    border-color: var(--border-color);
    color: var(--text-color);
}
.ds-dark-alt {
    --background-color: var(--dark-alt-background);
    --background-shade: var(--dark-alt-background-shade);
    --border-color: var(--dark-alt-border);

    background-color: var(--dark-alt-background);
    border-color: var(--dark-alt-border);
    color: var(--dark-text);
}

.ds-default,
.ds-light,
.ds-light-alt {
    --primary-action: var(--light-primary-action);
    --primary-action-hover: var(--light-primary-action-hover);
    --primary-action-text: var(--light-primary-action-text);
    --secondary-action: var(--light-secondary-action);
    --secondary-action-hover: var(--light-secondary-action-hover);
    --accent: var(--light-accent);
    --focus: var(--light-focus);
    --link-color: var(--light-link);
    --link-visited: var(--light-link-visited);
    --link-underline: var(--light-underline);
    --link-underline-hover: var(--light-underline-hover);
    --link-underline-visited: var(--light-underline-visited);
    --link-underline-visted-hover: var(--light-underline-visited-hover);
    --heading: var(--light-text-heading);
    --text-color: var(--light-text);
    --text-muted: var(--light-text-muted);    
    --site-title: var(--light-site-title);
    --button-primary: var(--light-primary-action);
    --button-primary-hover: var(--light-primary-action-hover);
    --button-primary-text: var(--light-primary-action-text);
    --button-secondary: var(--light-secondary-action);
    --button-secondary-hover: var(--light-secondary-action-hover);
    --button-tertiary: var(--light-tertiary-action);
    --button-tertiary-hover: var(--light-primary-action-hover);
}
.ds-dark,
.ds-dark-alt {
    --primary-action: var(--dark-primary-action);
    --primary-action-hover: var(--dark-primary-action-hover);
    --primary-action-text: var(--dark-primary-action-text);
    --secondary-action: var(--dark-secondary-action);
    --secondary-action-hover: var(--dark-secondary-action-hover);
    --accent: var(--dark-accent);
    --focus: var(--dark-focus);
    --link-color: var(--dark-link);
    --link-visited: var(--dark-link-visited);
    --link-underline: var(--dark-underline);
    --link-underline-hover: var(--dark-underline-hover);
    --link-underline-visted: var(--dark-underline-visited);
    --link-underline-visted-hover: var(--dark-underline-visited-hover);
    --heading: var(--dark-text-heading);
    --text-color: var(--dark-text);
    --text-muted: var(--dark-text-muted);    
    --site-title: var(--dark-site-title);
    --button-primary: var(--dark-primary-action);
    --button-primary-hover: var(--dark-primary-action-hover);
    --button-primary-text: var(--dark-primary-action-text);
    --button-secondary: var(--dark-secondary-action);
    --button-secondary-hover: var(--dark-secondary-action-hover);
    --button-tertiary: var(--dark-tertiary-action);
    --button-tertiary-hover: var(--dark-primary-action-hover);
}

/*==----------------------------------------====
    Utility
====----------------------------------------==*/
.debug,
.debug * {
    background-color: rgb(255 0 0 / 10%);
}

.sr-only {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.example {
    padding: 2rem;

    > * + * {
        margin-top: 1rem;
    }
}
.ds-tabs-content.example-content {
    padding: 0;
    .example {
        padding: 6rem 4rem;
    }
}

section:not([class]) + section:not([class]),
section.ds-light + section.ds-light,
section.ds-light-alt + section.ds-light-alt,
section.ds-dark + section.ds-dark,
section.ds-dark-alt + section.ds-dark-alt {
    padding-top: 0;
}