.nav-tabs {
    border-bottom: none;
    box-sizing: border-box;
    box-shadow: 0 -1px 0 var(--dividers-default) inset;
    margin-top: 8px;
    margin-bottom: 20px;

    .nav-item.nav-link[role='tab'] {
        @include text-body-bold;

        align-items: center;
        background-color: transparent;
        border: none;
        border-bottom: 2px solid transparent;
        color: var(--text-secondary);
        display: flex;
        height: 40px;
        margin: 0;
        padding: 0 12px;

        &.active,
        &:hover {
            color: var(--midnight-750);
        }

        &.active {
            color: var(--text-primary);
            border-color: var(--midnight-750);
        }

        &.disabled {
            color: var(--text-secondary-disabled);

            &.active {
                color: var(--text-primary-disabled);
            }
        }

        &:hover:not(.active),
        &.disabled:not(.active) {
            border-width: 1px;
            padding-bottom: 1px;
        }
    }
}