@rh-blue: #178ee8;
@admin-grey: #E0E2E7;
@admin-disabled: #1f1f28;

.tabHeaderContainerBase {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 2.5rem;
    border-bottom: 1px solid fade(@report-pane-background, 10%);
    color: @content-pane-titles;
}

.tabsOuterContainerBase {
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    bottom: -1px;
    z-index: 0;
    align-self: flex-end;
    flex-grow: 1;

    .tabsContainerFade {
        display: none;
        position: absolute;
        width: 30px;
        display: flex;
        align-items: center;

        .tabsContainerFadeIcon {
            color: #333;
            font-size: 24px;
        }
    }

    .tabsContainerLeft {
        top: 0;
        left: 0;
        bottom: 2px;
        justify-content: flex-start;

        &.tabsContainerFade {
            background: linear-gradient(to left, fade(#F6F9FC, 10%), fade(#F6F9FC, 50%) 20%, fade(#F6F9FC, 90%) 90%);
        }
    }

    .tabsContainerRight {
        top: 0;
        right: 0;
        bottom: 2px;
        justify-content: flex-end;

        &.tabsContainerFade {
            background: linear-gradient(to right, fade(#F6F9FC, 10%), fade(#F6F9FC, 50%) 20%, fade(#F6F9FC, 90%) 90%);
        }
    }

    .tabsContainer {
        padding: 0 15px;
        max-width: 80vw;
        height: 50px;
        overflow: hidden;
        position: relative;
        display: flex;
        flex-direction: row;
        overflow-x: scroll;
        flex-grow: 1;

        &::-webkit-scrollbar {
            display: none; /* Safari and Chrome */
        }
        /* firefox */
        scrollbar-width: none;

        .tabDisabled,
        .tbuttons {
            float: left;
            outline: none;
            cursor: pointer;
            padding: 14px 16px;
            font-size: 16px;
            // min-width: 200px;
            text-align: center;
            width: auto !important;
            text-transform: capitalize !important;
            margin: 0 10px !important;
            text-decoration: none;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin: 0.15rem !important;
            color: @content-pane-titles;

            &:hover {
                cursor: pointer;
                -moz-transform: scale(1.03);
                -webkit-transform: scale(1.03);
                -o-transform: scale(1.03);
            }

            &.editTenantTab {
                color: #212529;

                &:hover {
                    color: lighten(#212529, 20%);
                }
            }
        }

        .tabDisabled {
            color: fade(@content-pane-titles, 20%) !important;
            cursor: none;
            pointer-events: none;

            &:hover {
                color: fade(@content-pane-titles, 20%) !important;
                cursor: pointer;
                -moz-transform: scale(1.00);
                -webkit-transform: scale(1.00);
                -o-transform: scale(1.00);
            }
        }

        *.tbuttons.activetab {
            border-bottom: 2px solid @page-title !important;
            user-select: none;
            font-weight: bold;
        }

        *.tbuttons.editTenantTab.activetab {
            color: #212529 !important;
            border-bottom: 2px solid #212529 !important;
        }
    }
}

.tabHeaderContainer {
    .tabHeaderContainerBase();

    .tabsOuterContainer {
        .tabsOuterContainerBase();
    }
}

.tabHeaderContainerEditForm {
    .tabsOuterContainerBase();
    /*border-bottom: 1px solid @admin-grey;*/

    .tabsContainer {
        padding-left: 5px;


        .tbuttons {
            color: darken(@admin-grey, 75%);
        }
    }
}