@import "../style/themes/default.less";
@import "../style/mixins/index.less";

@tabs-prefix-cls: ~"@{sino-prefix}-tabs";
@tab-prefix-cls: ~"@{sino-prefix}-tab";

.@{tabs-prefix-cls} {
    position: relative;

    &-wrap {
        overflow: hidden;

        &-page-top {
            position: fixed;
        }

        &-content-bottom {
            top: auto;
            bottom: 0;
        }
    }

    &-scrollable {
        .sn-tab {
            flex: 0 0 22%;

            &-complete {
                flex: 1 0 auto;
            }
        }

        .@{tabs-prefix-cls}-nav {
            overflow: hidden;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;

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

    &-nav {
        position: relative;
        display: flex;
        background-color: @tabs-nav-background-color;
        user-select: none;

        &-line {
            box-sizing: content-box;
            padding-bottom: 0.2rem;
        }

        &-card {
            box-sizing: border-box;
            height: @tabs-card-height;
            margin: 0 @horizontal-spacing-sm;
            border: 1px solid @tabs-default-color;
            border-radius: @border-radius-base;

            .sn-tab {
                color: @tabs-default-color;
                line-height: @tabs-card-height - 2px;
                border-right: 1px solid @tabs-default-color;

                &:last-child {
                    border-right: none;
                }

                &.sn-tab-active {
                    color: #ffffff;
                    background-color: @tabs-default-color;
                }

                &-disabled {
                    color: @tab-disabled-text-color;
                }
            }
        }
    }

    &-indicator-line {
        position: absolute;
        bottom: 0.3rem;
        left: 0;
        z-index: 1;
        height: @tabs-bottom-bar-height;
        border-radius: @tabs-bottom-bar-border-radius;
        background-color: @tabs-bottom-bar-color;
    }

    &-track {
        position: relative;
        display: flex;
        width: 100%;
        height: 100%;
        will-change: left;
    }

    &-content {
        &-animated {
            overflow: hidden;
        }
    }
}

.@{tab-prefix-cls} {
    position: relative;
    flex: 1;
    box-sizing: border-box;
    min-width: 0;
    padding: 0 5px;
    color: @tab-text-color;
    font-size: @tab-font-size;
    line-height: @tabs-line-height;
    text-align: center;
    cursor: pointer;

    &-active {
        color: @tab-active-text-color;
        font-weight: @tab-font-weight-bold;
    }

    &-disabled {
        color: @tab-disabled-text-color;
        cursor: not-allowed;
    }

    &-text {
        position: relative;
    }

    &-panel {
        &,
        &-wrapper {
            flex-shrink: 0;
            box-sizing: border-box;
            width: 100%;
        }

        &-wrapper-inactive {
            height: 0;
            overflow: visible;
        }
    }
}
