@import "dxHelpers/reset";

.menu-nested::part(content) {
    padding-top: var(--dx-g-spacing-sm);
    width: 354px;
}

.menu_list {
    display: flex;
    flex-flow: column nowrap;
}

.menu-hidden::part(content) {
    display: none;
}

@media screen and (max-width: 1000px) {
    .menu-nested .menu_option:not(:first-child) {
        border-top: var(--border);
        margin-top: var(--dx-g-spacing-lg);
        padding-top: var(--dx-g-spacing-lg);
    }
}

@media screen and (min-width: 1000px) {
    .menu-nested-2-col::part(content) {
        width: 592px;
    }

    .menu-nested-2-col .menu_list {
        flex-flow: row wrap;
    }

    .menu-nested-2-col .menu_option {
        flex-grow: 1;
        flex-basis: 40%;
    }

    .menu-nested .menu_option:nth-child(n + 3) {
        border-top: var(--border);
        margin-top: var(--dx-g-spacing-lg);
        padding-top: var(--dx-g-spacing-lg);
    }

    .menu-nested-2-col .menu_option:nth-child(2n) {
        padding-left: var(--dx-g-spacing-sm);
    }

    .callout_link {
        margin-bottom: var(--dx-g-spacing-xs);
    }
}

.menu_option {
    --border: 1px solid var(--dx-g-blue-natural-90);

    display: flex;
    flex-direction: column;
    width: 100%;
}

.menu_option > a:first-of-type {
    margin-top: var(--dx-g-spacing-sm);
}

.menu_heading {
    display: block;
    color: var(--dx-g-blue-vibrant-20);
    font-family: var(--dx-g-font-display);
    font-size: var(--dx-g-text-sm);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: var(--dx-g-spacing-sm);
}

.callout_link {
    --dx-c-button-font-size: var(--dx-g-text-base);

    display: block;
    padding-top: var(--dx-g-spacing-xl);
    margin-top: auto;
    margin-left: var(--dx-g-spacing-sm);
}

.empty {
    padding: var(--dx-g-spacing-sm);
    color: var(--dx-g-gray-50);
    font-family: var(--dx-g-font-sans);
    font-size: var(--dx-g-text-sm);
}