@charset "UTF-8";

@import "../../next-core/lib/next.scss";
@import "./scss/function.scss";
@import "./scss/mixin.scss";
@import "./scss/placeholder.scss";
@import "./scss/variable.scss";

/* Slider*/
/*--------------------------------------*/

#{$slick-prefix} {
    @include box-sizing;

    position: relative;
    display: block;
    -webkit-touch-callout: none;
    user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;

    &-initialized {
        #{$slick-prefix}-slide {
            display: block;
        }
    }

    &-list {
        position: relative;
        overflow: hidden;
        display: block;
        margin: 0;
        padding: 0;
        transform: translate3d(0, 0, 0);

        &:focus {
            outline: none;
        }

        &.dragging {
            cursor: pointer;
            cursor: hand;
        }
    }

    &-track {
        position: relative;
        top: 0;
        left: 0;
        display: block;
        transform: translate3d(0, 0, 0);
    }

    &-slide {
        float: left;
        height: 100%;
        min-height: 1px;
        outline: 0;
        transition: all .3s cubic-bezier(0.86, 0, 0.07, 1);

        [dir="rtl"] & {
            float: right;
        }

        img {
            display: block;
        }
    }

    &-arrow {
        display: block;
        position: absolute;
        cursor: pointer;
        text-align: center;
        transition: 0.4s ease-in;

        /* prev/next 按钮不同位置下的外观*/
        &.inline {
            @include slick-arrow-statement(
                    $slick-arrow-icon-color-normal,
                    $slick-arrow-icon-color-hover,
                    $slick-arrow-icon-color-disabled,
                    $slick-arrow-bg-color-normal,
                    $slick-arrow-bg-color-hover,
                    $slick-arrow-bg-color-disabled,
                    $slick-arrow-bg-opacity-normal,
                    $slick-arrow-bg-opacity-hover,
                    $slick-arrow-bg-opacity-disabled
            );
        }

        &.outer {
            @include slick-arrow-statement(
                    $slick-arrow-icon-color-normal-outer,
                    $slick-arrow-icon-color-hover-outer,
                    $slick-arrow-icon-color-disabled-outer,
                    null,
                    null,
                    null,
                    null,
                    null,
                    null
            );
        }

        &.disabled{
            cursor: not-allowed;
        }
    }

    &-dots {
        display: block;
        position: absolute;
        z-index: 100;
        margin: 0;
        padding: 0;

        &-item {
            position: relative;
            display: inline-block;
            cursor: pointer;

            button {
                border: 0;
                outline: none;
                padding: 0;
                height: $slick-dots-diameter;
                width: $slick-dots-diameter;
                border-radius: 50%;
                background: $slick-dots-background-color-normal;
                opacity: $slick-dots-background-opacity-normal;

                &:hover {
                    background-color: $slick-dots-background-color-hover;
                    opacity: $slick-dots-background-opacity-hover;
                }
            }

            &.active button {
                background: $slick-dots-background-color-selected;
                opacity: $slick-dots-background-opacity-selected;
                animation: zoom .3s cubic-bezier(0.86, 0, 0.07, 1);
            }
        }

        /* dots 位于水平位置*/
        &.horizontal {
            @include slick-dots-position(
                    100%,
                    $slick-dots-position-bottom,
                    'horizontal'
            );
            text-align: center;

            #{$slick-prefix}-dots-item {
                margin: 0 $slick-dots-margin-lr;
            }
        }

        /* dots 位于右侧垂直位置*/
        &.vertical {
            @include slick-dots-position(
                    $slick-dots-diameter + 4 * 2,
                    $slick-dots-position-right,
                    'vertical'
            );

            display: flex;
            justify-content: center;
            flex-direction: column;

            #{$slick-prefix}-dots-item {
                margin: $slick-dots-margin-tb 0;
            }
        }
    }

    /* 水平滑动*/
    &#{$slick-prefix}-horizontal {

        &#{$slick-prefix}-outer {
            padding: 0 $slick-track-padding-lr;
        }

        #{$slick-prefix}-arrow {
            &.medium {
                @include slick-arrow-size($slick-arrow-width-m, $slick-arrow-height-m, $slick-arrow-icon-m);
            }

            &.medium.inline {
                @include slick-arrow-position-horizontal(calc((100% - #{$slick-arrow-height-m}) / 2), 0, null, 0);
            }

            &.medium.outer {
                @include slick-arrow-position-horizontal(
                    calc((100% - #{$slick-arrow-height-m}) / 2), // top
                    -$slick-arrow-position-lr-m, // right
                    null, // bottom
                    -$slick-arrow-position-lr-m // left
                );

            }

            &.large {
                @include slick-arrow-size($slick-arrow-width-l, $slick-arrow-height-l, $slick-arrow-icon-l);
            }

            &.large.inline {
                @include slick-arrow-position-horizontal(calc((100% - #{$slick-arrow-height-l}) / 2), 0, null, 0);
            }

            &.large.outer {
                @include slick-arrow-position-horizontal(
                    calc((100% - #{$slick-arrow-height-l}) / 2),
                    -$slick-arrow-position-lr-l,
                    null,
                    -$slick-arrow-position-lr-l
                );
            }
        }
    }

    /* 垂直滑动*/
    &#{$slick-prefix}-vertical {

        &#{$slick-prefix}-outer {
            padding: $slick-vertical-track-padding-tb 0;
        }

        #{$slick-prefix} {
            &-slide {
                display: block;
                height: auto;
                /* border: $slick-vertical-slide-border-width solid transparent;*/
            }

            &-arrow {
                /* size medium*/
                &.medium {
                    @include slick-arrow-size($slick-vertical-arrow-width-m, $slick-vertical-arrow-height-m, $slick-arrow-icon-m);
                }

                /* size medium & position inline*/
                &.medium.inline {
                    @include slick-arrow-position-vertical(0, null, 0, calc((100% - #{$slick-vertical-arrow-width-m}) / 2));
                }

                /* size medium & position outer*/
                &.medium.outer {
                    @include slick-arrow-position-vertical(-$slick-vertical-arrow-position-tb-m, null, -$slick-vertical-arrow-position-tb-m, calc((100% - #{$slick-vertical-arrow-width-m}) / 2));
                }

                /* size large*/
                &.large {
                    @include slick-arrow-size($slick-vertical-arrow-width-l, $slick-vertical-arrow-height-l, $slick-arrow-icon-l);
                }

                /* size large & position inline*/
                &.large.inline {
                    @include slick-arrow-position-vertical(0, null, 0, calc((100% - #{$slick-vertical-arrow-width-l}) / 2));
                }

                /* size large & position outer*/
                &.large.outer {
                    @include slick-arrow-position-vertical(-$slick-vertical-arrow-position-tb-l, null, -$slick-vertical-arrow-position-tb-l, calc((100% - #{$slick-vertical-arrow-width-l}) / 2));
                }
            }
        }
    }
}