@import '../dynamic';

$nav-tabs-height: 5rem;
$nav-tabs-border-width: 0.4rem;

.nav {
    &.nav-fluid {
        position: relative;
        .dropdown {
            position: static;
        }
    }
}

// tabs
.nav-tabs {
    background-color: white;
    font-family: $font-family-base;
    font-size: $font-size-base;
    font-weight: 600;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    line-height: $nav-tabs-height;
    border-bottom-style: none;
    height: $nav-tabs-height;

    .nav-link {
        color: $black;
        padding: 0 1rem;
        border-style: none none solid none;
        border-bottom-color: transparent;
        border-bottom-width: $nav-tabs-border-width;
        opacity: 0.6;
        height: $nav-tabs-height;
        &:hover,
        &:active {
            opacity: 1;
            border-bottom-color: transparent;
            &.disabled {
                color: $btn-disabled-opacity;
            }
        }
        &.active,
        &.active:hover {
            background-color: transparent;
            border-bottom-color: $branded;
            opacity: 1;
        }
        &.disabled {
            opacity: $btn-disabled-opacity;
            cursor: default;
        }
    }
}