@import "dxHelpers/reset";

a {
    text-decoration: none;
}

.nav-list-item {
    --horizontal-spacing: var(
        --dx-c-tab-horizontal-spacing,
        var(--dx-g-spacing-md)
    );

    position: relative;
    height: var(--dx-g-spacing-3xl);
    border-radius: var(--dx-g-spacing-sm) var(--dx-g-spacing-sm) 0 0;
}

.nav-list-item_default {
    padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg);
    justify-content: center;
    display: flex;
    font-family: var(--dx-g-font-sans);
    font-size: var(--dx-g-text-base);
    line-height: var(--dx-g-spacing-lg);
    font-weight: var(--dx-g-font-normal);
}

.nav-list-item_default:hover {
    border-radius: var(--dx-g-spacing-sm) var(--dx-g-spacing-sm) 0 0;
    background: var(--dx-g-cloud-blue-vibrant-95);
    color: var(--dx-g-blue-vibrant-20);
}

.nav-list-item_default:focus-visible {
    border-radius: var(--dx-g-spacing-sm) var(--dx-g-spacing-sm) 0 0;
    background: var(--dx-g-cloud-blue-vibrant-95);
    color: var(--dx-g-blue-vibrant-20);
    outline: 2px solid var(--dx-g-blue-vibrant-60);
}

.nav-list-item_small {
    --border-color: transparent;

    border-bottom: 2px solid var(--border-color);
    font-size: var(--dx-g-text-xs);
    height: calc(var(--dx-g-spacing-xl) - 2px);
    margin: 0 var(--horizontal-spacing);
}

button.nav-list-item_default > dx-icon {
    margin-left: var(--dx-g-spacing-sm);
}

button.nav-list-item_small > dx-icon {
    margin-left: var(--dx-g-spacing-xs);
}

:host([aria-expanded="true"]) button.nav-list-item_default {
    background: var(
        --dx-g-brand-current-button-color-background-inactive,
        var(--dx-g-brand-default-button-color-background-inactive)
    );
}

button.nav-list-item:hover > dx-icon,
button.nav-list-item:active > dx-icon,
:host([aria-expanded="true"]) button.nav-list-item > dx-icon {
    transform: rotateX(180deg);
}

.nav-list-item_small:hover,
.nav-list-item_small:active,
:host([aria-expanded="true"]) button.nav-list-item_small {
    --border-color: var(--dx-g-blue-vibrant-40);

    color: var(--dx-g-blue-vibrant-40);
}

.nav-list-item_small.state-active {
    --border-color: var(--dx-g-blue-vibrant-50);

    color: var(--dx-g-blue-vibrant-50);
}

.nav-list-item_default.state-active {
    color: var(--dx-g-blue-vibrant-50);
    font-weight: var(--dx-g-font-bold);
    padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg)
        var(--dx-g-spacing-sm) var(--dx-g-spacing-lg);
    border-bottom: var(--dx-g-spacing-xs) solid var(--dx-g-blue-vibrant-50);
}

.nav-list-item_default.state-active:hover {
    border-radius: var(--dx-g-spacing-sm) var(--dx-g-spacing-sm) 0 0;
    background: var(--dx-g-cloud-blue-vibrant-95);
    border-bottom: var(--dx-g-spacing-xs) solid var(--dx-g-blue-vibrant-20);
    color: var(--dx-g-blue-vibrant-20);
}

.nav-list-item_default.state-active:focus-visible {
    border-radius: var(--dx-g-spacing-sm) var(--dx-g-spacing-sm) 0 0;
    background: var(--dx-g-cloud-blue-vibrant-95);
    border-bottom: var(--dx-g-spacing-xs) solid var(--dx-g-blue-vibrant-20);
    outline: 2px solid var(--dx-g-blue-vibrant-60);
    color: var(--dx-g-blue-vibrant-20);
}

@media (max-width: 1160px) {
    .nav-list-item_small {
        --horizontal-spacing: var(
            --dx-c-tab-horizontal-spacing,
            var(--dx-g-spacing-smd)
        );
    }
}

@media (max-width: 1090px) {
    .nav-list-item_small {
        --horizontal-spacing: var(
            --dx-c-tab-horizontal-spacing,
            var(--dx-g-spacing-sm)
        );
    }
}

@media (max-width: 768px) {
    .nav-list-item {
        height: var(--dx-g-spacing-3xl);
        display: flex;
    }
}