@import "dxHelpers/reset";

.tab {
    color: var(--dx-g-blue-vibrant-20);
    font-family: var(--dx-g-font-sans);
    font-size: var(--dx-g-text-base);
    font-weight: var(--dx-g-font-normal);
    line-height: var(--dx-g-spacing-lg);
    padding: var(--dx-g-spacing-sm) var(--dx-g-spacing-lg);
    border-top-left-radius: var(--dx-g-spacing-sm);
    border-top-right-radius: var(--dx-g-spacing-sm);
    border-bottom: var(--dx-g-spacing-xs) solid transparent;
    white-space: nowrap;
    margin-right: var(--dx-g-spacing-md);
}

button:focus {
    outline: none;
}

.tab:hover {
    background-color: var(--dx-g-blue-vibrant-95);
    color: var(--dx-g-blue-vibrant-20);
}

.tab-active {
    color: var(--dx-g-blue-vibrant-50);
    font-weight: var(--dx-g-font-bold);
    border-bottom: var(--dx-g-spacing-xs) solid var(--dx-g-blue-vibrant-50);
}

.tab-active:focus-visible,
.tab-active:hover {
    border-bottom: var(--dx-g-spacing-xs) solid var(--dx-g-blue-vibrant-20);
    color: var(--dx-g-blue-vibrant-20);
}

.tab:focus-visible {
    background: var(--dx-g-cloud-blue-vibrant-95);
    color: var(--dx-g-blue-vibrant-20);
    outline: 2px solid var(--dx-g-blue-vibrant-60);
}

@media screen and (max-width: 640px) {
    .tab {
        font-size: var(--dx-g-text-base);
        font-family: var(--dx-g-font-sans);
        font-weight: var(--dx-g-font-normal);
    }

    .tab-active {
        font-weight: var(--dx-g-font-bold);
    }
}