$box-height:20px;
$line-height:2px;
$circle-width:12px;
$dotted-width:4px;
$slider-color:#3a8ee6;
$circle-color:#007aff;

.ct-slider {
    position: relative;
    z-index: 2000;
    margin:12px 0;
    height: $box-height;
    color: $slider-color;
    .ct-slider-wrap {
        position: absolute;
        top:($box-height - $line-height)/2;
        left: 0;
        width: 100%;
        .ct-slider-line {
            width: 100%;
            height: $line-height;
            border-radius: 5px;
            background: $border-color; 
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2000;
            .ct-slider-dotted {
                height: $dotted-width;
                width: $dotted-width;
                border-radius: 100%;
                background: #fff;
                position: absolute;
                top: -(($dotted-width - $line-height)/2);
                transform: translate3d(-($dotted-width),0,0);
            }
        }
        .ct-slider-progress {
            height: $line-height;
            border-radius: 5px;
            background: currentColor; 
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2001;
            .ct-slider-circle {
                position: absolute;
                right: -($circle-width/2);
                top: -($circle-width - $line-height)/2;
                width: $circle-width;
                height: $circle-width;
                box-sizing: border-box;
                background: currentColor; 
                border-radius: 100%;
                transition: .3s ease-in-out;
                transform: scale(1);
                box-sizing: border-box;
                z-index: 2002;
                cursor: pointer;
                &.dis-circle {
                    transform: scale(0);
                    &.ct-slider-star {
                        transform: scale(0.5);
                        background: $border-color;
                    }
                }
                &.ct-slider-star {
                    border: 2px solid $border-color;
                    background: #fff;
                }
            }
            .ct-slider-tip {
                width: 30px;
                height: 30px;
                position: absolute;
                top:-40px;
                right: -14px;
                background: currentColor;
                border-radius: 50% 50% 50% 0;
                transform: rotate(-45deg);
                opacity: 0;
                transition:opacity .3s ease-in-out;
                z-index:2000;
                &.tip-show {
                    opacity:1;
                }
                .ct-slider-tip__inner {
                    color: #fff;
                    transform: rotate(45deg);
                    font-size: 12px;
                    width: 30px;
                    line-height: 30px;
                    overflow: hidden;
                    text-align: center;
                }
                &.is-revers {
                    top: 12px;
                    transform: rotate(135deg);
                    .ct-slider-tip__inner {
                        transform: rotate(-135deg);
                    }
                }
            }
        }
    }
    &.is-vertical {
        width: $box-height;
        left: ($box-height - $line-height)/2;
        margin:10px;
        display: inline-block;
        .ct-slider-wrap {
            top: 0;
            height: 100%;
            width: $line-height;
            .ct-slider-line {
                width: $line-height;
                height: 100%;
                // left: 1px;
                .ct-slider-dotted {
                    top: auto;
                    left:-($dotted-width - $line-height)/2;
                    transform: translate3d(0,$dotted-width,0);
                }
            }
            .ct-slider-progress {
                width: $line-height;
                top: auto;
                bottom: 0;
                .ct-slider-circle {
                    right: -(($circle-width - $line-height)/2);
                    top: -($circle-width/2);
                }
                .ct-slider-tip {
                    transform: rotate(45deg);
                    top: -14px;
                    right: -40px;
                    .ct-slider-tip__inner {
                        transform: rotate(-45deg);
                    }
                    &.tip-show {
                        transform: rotate(45deg);
                    }
                    &.is-revers {
                        right: 12px;
                        transform: rotate(-135deg);
                        .ct-slider-tip__inner {
                            transform: rotate(135deg);
                        }
                    }
                }
            }
        }
    }
    &.is-disabled {
        .ct-slider-wrap {
            .ct-slider-line {
                background: $border-color !important;
            } 
            .ct-slider-progress {
                background:$border-color !important;
                .ct-slider-circle {
                    border:2px solid $border-color !important;
                    background: #fff !important;
                }
                .ct-slider-tip {
                    background: $border-color;
                }
            }
        }
    } 
}