.tab-navigation {
    display: flex;
    min-height: $tab-navigation-min-height;
    padding: 0 32px;
    border-bottom: $default-border;

    .tab {
        position: relative;
        display: flex;
        align-content: center;
        align-items: center;
        height: 32px;
        margin-left: 0.5rem;
        text-transform: none;
        cursor: pointer;

        .tab-icon {
            margin-right: 5px;
        }

        &:disabled {
            color: var(--grey-60);
            cursor: default;
            pointer-events: none;

            .icon {
                fill: var(--grey-60);
            }
        }

        &:focus-visible {
            @include focus-outline;
        }
    }

    .active-tab-bottom-line {
        height: 4px;
        margin-left: 0.5rem;
        border: solid transparent;
        border-radius: $tab-bottom-border-height;

        &.active {
            background-color: var(--digital-blue-60);
            border: solid var(--digital-blue-60);
        }
    }

    & > * {
        margin-right: $tab-margin-right;
    }

    &.sub-tabs {
        .tab {
            font-weight: var(--main-font-regular);
            font-size: $sub-tab-font-size;
            border-bottom-width: 2px;
        }
    }
}

.tab-pane {
    display: none;
    visibility: hidden;

    &.active {
        display: block;
        visibility: visible;

        @extend .slideInLeft;
    }

    .loading,
    & > .spinner {
        margin-top: $tab-pane-loading-margin-top;
    }
}