<% if(npmOptions.indexOf('slick-carousel') >= 0){ %>

@import '~slick-carousel/slick/slick.scss';

.ce_sliderStart {
    .slider-wrapper {
        position: relative;
        .slick-arrow {
            position: absolute;
            top: calc(50% - 20px);
            font-size: 0;
            line-height: 0;
            width: 40px;
            height: 40px;
            background: none;
            background-color: $color-active;
            border-radius: 100%;
            z-index: 5;
            transform: scale(1.0);
            transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;

            &:after {
                content: none;
            }
            &:before {
                content: "";
                position:absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background-repeat: no-repeat;
                background-position: center center;
            }

            &:hover {
                background-color: $color-active-over;
                transform: scale(1.05);
            }

            &.slick-prev {
                left: -20px;
                &:before {
                    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='14.1px' height='25.4px' viewBox='0 0 14.1 25.4' style='enable-background:new 0 0 14.1 25.4;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23FFFFFF;stroke-width:2;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cdefs%3E%3C/defs%3E%3Cpolyline class='st0' points='13.4,24.7 1.4,12.7 13.4,0.7 '/%3E%3C/svg%3E%0A");
                    background-position: 45% center;
                }
            }
            &.slick-next {
                right: -20px;
                &:before {
                    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='14.1px' height='25.4px' viewBox='0 0 14.1 25.4' style='enable-background:new 0 0 14.1 25.4;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23FFFFFF;stroke-width:2;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cdefs%3E%3C/defs%3E%3Cpolyline class='st0' points='0.7,0.7 12.7,12.7 0.7,24.7 '/%3E%3C/svg%3E%0A");
                    background-position: 55% center;
                }
            }
        }

        .slick-dots {
            list-style: none;
            padding-left: 0;
            text-align: center;
            li {
                display: inline-block;
                width: 20px;
                height: 20px;
                margin: 0 5px;
                padding: 0;
                cursor: pointer;
                button {
                    font-size: 0;
                    line-height: 0;
                    display: block;
                    width: 20px;
                    height: 20px;
                    padding: 5px;
                    cursor: pointer;
                    color: transparent;
                    border: 0;
                    outline: none;
                    background: transparent;

                    &:before {
                        content: " ";
                        display: block;
                        width: 10px;
                        height: 10px;
                        background-color: $color-text;
                        border-radius: 100%;
                        position: relative;
                        background-image: none;
                        transform: background-color 0.2s ease-in-out;
                    }
                    &:after {
                        content: none;
                    }
                }

                &.slick-active {
                    button {
                        &:before {
                            background-color: $color-active;
                        }
                    }
                }
            }
        }
    }
    .slider-control{
        display: none;
    }
}
    
<% } %>