@import '../../style_config/config.scss';

.JDslider {
    position: relative;
    overflow:hidden;


    &--unDisplayArrow {
        .slick-arrow {
            display: none!important;
        }
    }

    &__slide {
        &-wrap{
            text-align: center;
            box-sizing:border-box;
            outline:0;
        }
    }

    .slick-arrow {
        margin: 0;
    }
    // arrow
    .circleIcon-Wrap {
        position: absolute; 
        top: calc( 50% - (#{$slider-arrow-height} + #{$slider-dot-size} + #{$slider-dots-padding}) / 2);
        z-index: 9;
        // first arrow ◀️
        &:first-child{
            left: 0;
            // last arrow ▶️
            & ~ .circleIcon-Wrap {
                right: 0;
            }
        }
    }

    // button + 마진 떄문
    .slick-list {
        margin: 0;
        //  슬라이드 한장 한장
        .slick-slide {
            float: left;
        }
        .slick-track:after {
            display:block;
            clear:both;
            content:"";
        }
    }
    
    // 클릭시 효과
    .JDslider__dots {
        // dom에 block 이 쓰여있다.
        display: flex!important;
        width: 100%;
        justify-content: center;
        padding: $slider-dots-padding 0;
        padding-bottom: 0;
        margin:0;


        // 인덱스 버튼들
        li {
            border-radius:100%;
            cursor: pointer;
            position: relative;
            display: inline-block;
            margin: 0 $slider-dot-margin/2;
            padding: 0;
            
            // 기본 버튼 가림
            button {
                font-size: 0;
                line-height: 0;
                display: block;
                padding: 5px;
                color: transparent;
                border: 0;
                outline: none;
                background: transparent;
                
                // 점                
                &:before{
                    content:"";
                    background-color: $slider-dot-bgColor;
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: $slider-dot-size;
                    height: $slider-dot-size;
                    border-radius:50%;
                    text-align: center;
                    cursor:pointer;
                    -webkit-font-smoothing: antialiased;
                }
                &:hover {
                    &:before {
                        background-color:$slider-dot-hover-bgColor;
                    }
                }
            }

            // 엑티브된 dot 
            &.slick-active {
                button {
                    font-size: 0;
                    line-height: 0;
                    display: block;
                    color: transparent;
                    border: 0;
                    outline: none;
                    background: transparent;
                    height: $slider-dot-size;
                    
                    // 점
                    &:before{
                        background-color: $slider-dot-active-bgColor;
                    }
                }
            }
        }
    }
}