@mixin slider-carousel($defaultColor: #FFFFFF, $bgColor: #FFF) {
    .slider-carousel {
        -webkit-user-select: none;       
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        display: block;
        width: 100%;
        box-sizing: border-box;
    
        > section {
            position: relative;
            margin: auto;
    
            .image-controller {
                border-radius: 4px;
                position: relative;
                width: 100%;
                height: 100%;
                box-shadow: 0 0 6px rgba(0,0,0, .2), 0 0 20px rgba(0,0,0, .2);
                overflow: hidden;
                margin: auto;
                background-color: $bgColor;
    
                .image-controller-background {
                    position: absolute;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    top: 0;
                    background-size: contain;
                    background-repeat: no-repeat;
                    background-position: center;
                    filter: blur(60px) grayscale(100%);
                    -webkit-filter: blur(60px) grayscale(100%);
                    transition-duration: .8s;
                }
    
                .image-controller-next,
                .image-controller-prev {
                    position: relative;
                    animation-duration: .4s;
                    animation-fill-mode: both;
                    transition-duration: .4s;
                    max-height: 35px;
    
                    position: absolute;
                    top: calc(50% - 20px);
                    border-radius: 50%;
                    box-shadow: 0 0 6px rgba(0,0,0, .2), 0 0 12px rgba(0,0,0, .2);
    
                    > svg {
                        transition-duration: .4s;
                        position: relative;
                        width: 35px;
                        height: 35px;
                        fill: #FFF;
                    }
    
                    &::before {
                        $rowColor: $defaultColor;
                        @if ($rowColor == #FFFFFF) {
                            $rowColor: rgba(#000, .4);
                        }


                        transition-duration: .4s;
                        content: '';
                        position: absolute;
                        top: 1px;
                        bottom: 1px;
                        left: 1px;
                        right: 1px;
                        border-radius: 50%;
                        background: $rowColor;
                    }
                    
                    &.disabled {
                        opacity: .5;
                        box-shadow: 0 0 6px rgba(0, 0, 0, 0.05), 0 0 12px rgba(0, 0, 0, 0.05);
                    }
    
                    &:not(.disabled) {
                        cursor: pointer;
                    }
                }
    
                .image-controller-next {
                    right: 15px;
                    animation-name: fadeOutRight;
                }
                    
                .image-controller-prev {
                    left: 15px;
                    animation-name: fadeOutLeft;
                    
                    > svg {
                        transform: rotate(180deg);
                    }
    
                }
    
                > ul {
                    top: 0;
                    position: relative;
                    list-style: none;
                    margin: 0;
                    padding: 0;
                    display: table;
                    overflow: hidden;
                    white-space: nowrap;
                    transition-duration: .8s;
                    min-height: 254px;
                    box-sizing: border-box;
                    
                    > li {
                        display: inline-table;
                        height: 100%;
                        background-size: contain;
                        background-repeat: no-repeat;
                        background-position: center;
                        background-color: $bgColor;
                    }
        
                    > div {
                        display: inline-block;
                        height: 100%;
                        vertical-align: middle;
                        text-align: center;
    
                        > img {
                            width: 100%;
                            height: auto;
							display: block;
							-webkit-user-select: none;
							-khtml-user-select: none;
							-moz-user-select: none;
							-o-user-select: none;
							user-select: none;
                        }
                    }
    
                    &.dragging-effect {
                        transition-duration: initial;
                    }
                }
            }
    
            .footer-images {
                position: absolute;
                left: 50%;
                bottom: 0;
                overflow: hidden;
                width: 100%;
                transform: translateX(-50%);
                background: linear-gradient(to bottom, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.42) 55%, rgba(0, 0, 0, 0.65));
                border-radius: 0 0 4px 4px;
    
                > ul {
                    list-style: none;
                    margin: 0;
                    padding: 14px 7px;
                    white-space: nowrap;
                    box-sizing: border-box;
        
                    > li {
                        display: inline-block;
                        position: relative;
                        margin: 0 7px;
                        width: 100px;
                        height: 70px;
                        border-radius: 4px;
                        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 6px rgba(0, 0, 0, 0.5);
                        background-size: cover;
                        background-repeat: no-repeat;
                        background-position: center;
                        box-sizing: border-box;
    
                        &::before {
                            content: '';
                            position: absolute;
                            border-radius: 4px;
                            left: 0;
                            top: 0;
                            width: 100%;
                            height: 100%;
                            border: 2px solid transparent;
                            transition-duration: .5s;
                            box-sizing: border-box;
                        }
    
                        &.is-current {
                            &::before {
                                border-color: $defaultColor;
                            }
                        }
    
                        &:not(.is-current) {
                            cursor: pointer;
                            &:hover {
    
                                &::before {
                                    border-color: $defaultColor;
                                }
                            }
                        }
                    }
                }
            }
    
            &:hover {
                .image-controller {
                    .image-controller-next {
                        animation-name: fadeInRight;
                    }
                    .image-controller-prev {
                        animation-name: fadeInLeft;
                    }
                }
            }
        }

        .cursor-pointer {
            cursor: pointer;
        }
    }

    .slider-carousel-preview {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, .6);

        animation-duration: .5s;
        animation-fill-mode: both;
        animation-name: carouselFadeIn;

        > section {
            animation-duration: .5s;
            animation-fill-mode: both;
            animation-name: carouselFadeIn;

            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.2);

            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        > div {
            position: absolute;
            top: calc(50% - 100px);
            left: 50%;
        }

        &.closed {
            -webkit-animation-name: carouselFadeOut;
            animation-name: carouselFadeOut;
        }

        img {
            border-radius: 5px;
            display: block;
            width: 0px;
            width: 0px;
        }

        .slider-carousel-preview-actions {
            position: absolute;
            top: 15px;
            right: 15px;
            
            button {
                position: relative;
                cursor: pointer;
                float: left;
                outline: 0 !important;
                padding: 0 !important;
                width: 35px !important;
                height: 35px !important;
                min-width: 0 !important;
                min-height: 0 !important;
                box-shadow: 0 2px 10px rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .2);
                border-radius: 50%;
                background: rgba(0, 0, 0, .3);
                
                svg {
                    width: 35px;
                    height: 35px;
                    margin-left: -2px;
                    margin-top: -2px;
                    fill: #FFF;
                }
            }
        }

        .slider-carousel-preview-loading {
            display: table;
            padding: 40px 60px;
            background: #FFF;
            border-radius: 5px;
        }
    }

    .slider-carousel-loading {
        color: #FFF;
        text-indent: -9999em;
        margin: 88px auto;
        position: relative;
        font-size: 11px;
        transform: translateZ(0);
        animation-delay: -0.16s;
        background: #FFF;
        animation: anim-loading 1s infinite ease-in-out;
        width: 1em;
        height: 4em;

        &:before,
        &:after {
            background: #FFF;
            animation: anim-loading 1s infinite ease-in-out;
            width: 1em;
            height: 4em;
        }

        &:before,
        &:after {
            position: absolute;
            top: 0;
            content: '';
        }
        &:before {
            left: -1.5em;
            animation-delay: -0.32s;
        }
        &:after {
            left: 1.5em;
        }

    }

    @keyframes anim-loading {
        0%,
        80%,
        100% {
            box-shadow: 0 0;
            height: 4em;
        }
        40% {
            box-shadow: 0 -2em;
            height: 5em;
        }
    }
      
    @keyframes carouselFadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
      
    @keyframes carouselFadeOut {
        from { opacity: 1; }
        to { opacity: 0; }
    }
}