@import '../core/theme.scss';
@import '../../helpers/_size.scss';

/* TABS AND TAB CONTAINER */
.tab-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    overflow: hidden;
    overflow-x: auto; /* Allow scrollbar to be visible if the width of the tabs exceeds container */
    user-select: none;
    white-space: nowrap;
    -webkit-box-align: stretch;
    align-items: stretch;
    font-size: var(--font-size-s);

    /* Shift tabs to the center */
    &.tabs-center ul {
        justify-content: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
    }

    /* Shift tabs to the right */
    &.tabs-right ul {
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }

    /* Depth tab styles */
    &.tabs-depth ul {
        box-shadow: 0 2px 3px transparentize($color: map-get($grays, '600'), $amount: 0.85);
        border-bottom: 0;
    }

    /* Classic tab styles */
    &.tabs-classic {
        ul {
            border-bottom-color: map-get($grays, '300');
            border-bottom-style: solid;
            border-bottom-width: 1px;
            border-radius: 3px 3px 0 0; /* Only round the top left and right corners */
            transition: all 0.3s;

            li {
                &:not(.selected) a:hover,
                &:not(.selected) .tab-item-content:hover {
                    background-color: map-get($grays, '100');
                    transition: all 0.3s;
                }

                &.selected a,
                &.selected .tab-item-content {
                    color: var(--cirrus-primary);
                    border-color: map-get($grays, '300');
                    border-bottom-color: transparent !important;
                }

                a,
                .tab-item-content {
                    border: 1px solid transparent;
                    border-bottom-color: map-get($grays, '300');
                    border-radius: 3px 3px 0 0;
                    cursor: pointer;
                    transition: all 0.3s;
                }
            }
        }
    }

    /* Tabs that fill the width */
    &.tabs-fill {
        /* Override the -webkit-box display that sizes tab items based on text */
        ul {
            display: flex; /* Equal size tabs */
        }

        li {
            -webkit-box-flex: 1;
            -ms-flex-positive: 1;
            flex-grow: 1;
            -ms-flex-negative: 0;
            flex-shrink: 0; /* Disable shrinking to original width */
            flex-basis: 0;
        }
    }

    /* Different tab sizes */
    @each $name, $size in $tab-sizes {
        &.tabs-#{$name} {
            font-size: #{$size};
        }
    }

    /* Tabs are embedded inside an unordered list */
    ul {
        display: flex;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start; /* Move tab items to left side */
        margin: 0.5rem; /* Override the behavior for standard ul and add equal padding */
        border-bottom: 1px solid map-get($grays, '200'); /* Bottom border of tabs */
        flex-grow: 1;
        list-style: none;
        padding-inline-start: 0;
    }

    li {
        display: block; /* Keep the tabs from extending too far */
        cursor: pointer;
        margin: 0;
        text-align: center;

        &:hover a,
        &:hover .tab-item-content {
            border-bottom-color: rgba(240, 61, 77, 0.6);
            transition: all 0.3s;
        }

        &.selected a,
        &.selected .tab-item-content {
            border-bottom-color: var(--cirrus-primary);
            color: var(--cirrus-primary);
            border-width: 2px;
            transition: all 0.3s;
        }

        a,
        .tab-item-content {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            align-items: center;
            border-bottom: 1px solid map-get($grays, '200');
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            padding: 0.5rem 1rem;
            transition: all 0.3s;
            color: var(--cirrus-fg);
            // border-bottom-color: rgba(197, 197, 197, 0.63);
            border-width: 2px;
            margin-bottom: -1px; /* Get rid of any remaining border lines */
            background-color: var(--cirrus-bg);
        }
    }

    /* Font Awesome Integration */
    /* Left icon */
    .icon:first-child {
        margin-right: 0.75rem;
    }

    /* Right icon */
    .icon:last-child {
        margin-left: 0.75rem;
    }
}