@import "../../mixins/get-color";
@import "../../custom";

.#{$component-name}-border-card-roller {
    position: relative;
}

.#{$component-name}-border-card-slider {
    box-sizing: border-box;
    position: absolute;
    @include get-color-primary-active(background-color)
}

.#{$component-name}--border-card {
    // tab样式
    .#{$component-name}-tab {
        box-sizing: border-box;
        cursor: pointer;
        font-weight: 500;
        &:not(.#{$component-name}-tab--disabled) {
            &:hover {
                @include get-color-primary-hover(color);
            }
        }
        &--active {
            @include get-color-primary-active(color);
        }
        &--disabled {
            @include get-color-disabled(color);
            cursor: not-allowed;
        }
    }
}


.#{$component-name}--horizontal {
    &.#{$component-name}--border-card {
        // tab样式
        .#{$component-name}-tab {
            display: inline-block;
            margin-right: 32px;
            padding: 12px 16px;
            &:last-child {
                margin-right: 0;
            }
        }
    }
    .#{$component-name}-border-card-roller {
        display: inline-block;
    }
    .#{$component-name}-border-card-wrap {
        display: inline-block;
        white-space: nowrap;
    }
    // 滑块
    .#{$component-name}-border-card-slider {
        width: 0;
        height: 2px;
        transition: $transition-time width $bezier,
        $transition-time left $bezier
    }
    &.#{$component-name}--top {
        .#{$component-name}-border-card-slider {
            bottom: 0;
        }
    }
    &.#{$component-name}--bottom {
        .#{$component-name}-border-card-slider {
            top: 0;
        }
    }
}

.#{$component-name}--vertical {
    &.#{$component-name}--border-card {
        .#{$component-name}-tab {
            display: block;
            margin-bottom: 16px;
            padding: 8px 24px;
        }
    }
    .#{$component-name}-border-card-roller {
        display: block;
        width: 100%;
    }
    .#{$component-name}-border-card-wrap {
        display: block;
        width: 100%;
    }
    .#{$component-name}-border-card-slider {
        width: 2px;
        height: 0;
        transition: $transition-time height $bezier,
                    $transition-time top $bezier
    }
    &.#{$component-name}--left {
        .#{$component-name}-border-card-slider {
            right: 0;
        }
    }
    &.#{$component-name}--right {
        .#{$component-name}-border-card-slider {
            left: 0;
        }
    }
}