@import './var.scss';
@import '../../Style/mixin/index.scss';

:root {
    --tabs-default-color: #{$tabs-default-color};
    --tabs-line-height: #{$tabs-line-height};
    --tabs-img-height: #{$tabs-img-height};
    --tabs-nav-bg: #{$tabs-nav-bg};
    --tabs-line-bar-width: #{$tabs-line-bar-width};
    --tabs-img-line-bar-width: #{$tabs-img-line-bar-width};
    --tabs-line-bar-height: #{$tabs-line-bar-height};
    --tabs-img-border-radius: #{$tabs-img-border-radius};
    --tabs-line-bar-color: #{$tabs-line-bar-color};
    --tabs-scrollable-padding: #{$tabs-scrollable-padding};
    --tab-text-color: #{$tab-text-color};
    --tab-disabled-text-color: #{$tab-disabled-text-color};
    --tab-font-size: #{$tab-font-size};
    --tab-img-font-size: #{$tab-img-font-size};
    --tab-line-height: #{$tab-line-height};
}

.jing-tabs {
    position: relative;

    &__content {
        overflow: hidden;
    }

    &__wrap {
        height: var(--tabs-line-height);
        overflow: hidden;

        &--scrollable {
            .jing-tab {
                flex: 1 0 auto;
                padding: 0 var(--tabs-scrollable-padding);
            }

            .jing-tabs__nav {
                overflow-x: auto;
                overflow-y: hidden;
                -webkit-overflow-scrolling: touch;

                &::-webkit-scrollbar {
                    display: none;
                }
            }
        }

        &--img {
            height: var(--tabs-img-height);

            .jing-tabs__line {
                width: var(--tabs-img-line-bar-width);
                border-radius: var(--tabs-img-border-radius);
            }
        }
    }

    &__nav {
        box-sizing: content-box;
        position: relative;
        display: flex;
        // background-color: var(--tabs-nav-bg);
        user-select: none;
        height: 100%;
        padding-bottom: 15px;
    }

    &__line {
        position: absolute;
        bottom: 15px;
        left: 0;
        z-index: 1;
        width: var(--tabs-line-bar-width);
        height: var(--tabs-line-bar-height);
        background-color: var(--tabs-line-bar-color);
        border-radius: var(--tabs-line-bar-height);
    }

    &__panel {
        display: none;
        position: relative;
        transition: height 0.3s;
        height: 100%;

        &--active {
            display: block;
        }
    }
}

.jing-tab {
    @include flex-center;
    position: relative;
    flex: 1;
    padding: 0 var(--padding-base);
    color: var(--tab-text-color);
    font-size: var(--tab-font-size);
    line-height: var(--tab-line-height);
    cursor: pointer;

    &--active {
        color: var(--tab-active-text-color);
        font-weight: var(--font-weight-bold);
    }

    &--disabled {
        color: var(--tab-disabled-text-color);
        cursor: not-allowed;
    }

    &--img {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: var(--tab-img-font-size);
    }

    &__text {
        &--ellipsis {
            display: -webkit-box;
            overflow: hidden;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
        }

        &-wrapper {
            position: relative;
        }
    }

    &__img {
        width: 36px;
        padding-bottom: 5px;
    }
}