@import "../../../scss/variables";

/*! lightslider - v1.1.3 - 2015-04-14
* https://github.com/sachinchoolur/lightslider
* Copyright (c) 2015 Sachin N; Licensed MIT */

.lSSlideWrapper {
    position: relative;

    .lSFade {
        position: relative;
    }

    .lSSlide,
    &.usingCss .lSFade > * {
        -webkit-transition-timing-function: inherit !important;
        transition-timing-function: inherit !important;
        -webkit-transition-duration: inherit !important;
        transition-duration: inherit !important;
    }
}

.lSSlideOuter {
    -khtml-user-select: none;
    user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;

    .lSPager.lSGallery {
        -khtml-user-select: none;
        user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -webkit-touch-callout: none;
        -webkit-user-select: none;

        &:after {
            clear: both;
        }
    }
}

.lSSlideWrapper > .lightSlider:after {
    clear: both;
}

.lSSlideOuter {
    overflow: hidden;
    user-select: none;
}

.lightSlider {
    &:after,
    &:before {
        content: " ";
        display: table;
    }

    overflow: hidden;
    margin: 0;
}

.lSSlideWrapper {
    max-width: 100%;
    overflow: hidden;

    .lSSlide {
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-transition: all 1s;
        transition: all 1s;
        -webkit-transition-property: -webkit-transform, height;
        -moz-transition-property: -moz-transform, height;
        transition-property: transform, height;
    }

    .lSFade > * {
        position: absolute !important;
        top: 0;
        left: 0;
        z-index: 9;
        margin-right: 0;
        width: 100%;
    }

    &.usingCss .lSFade > * {
        opacity: 0;
        -webkit-transition-delay: 0s;
        transition-delay: 0s;
        -webkit-transition-property: opacity;
        transition-property: opacity;
    }

    .lSFade > .active {
        z-index: 10;
    }

    &.usingCss .lSFade > .active {
        opacity: 1;
    }
}

.lSSlideOuter {
    .lSPager.lSpg {
        margin: 10px 0 0;
        padding: 0;
        text-align: center;

        > li {
            cursor: pointer;
            display: inline-block;
            padding: 0 5px;

            a {
                background-color: #222;
                border-radius: 30px;
                display: inline-block;
                height: 8px;
                overflow: hidden;
                text-indent: -999em;
                width: 8px;
                position: relative;
                z-index: 2;
                -webkit-transition: all 0.5s linear 0s;
                transition: all 0.5s linear 0s;
            }

            &.active a,
            &:hover a {
                background-color: #428bca;
            }
        }
    }

    .media {
        opacity: 0.8;

        &.active {
            opacity: 1;
        }
    }

    .lSPager.lSGallery {
        list-style: none;
        padding-left: 0;
        margin: 0;
        overflow: hidden;
        transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -webkit-transition-property: -webkit-transform;
        transition-property: -webkit-transform;
        -moz-transition-property: -moz-transform;
        user-select: none;

        li {
            overflow: hidden;
            -webkit-transition: border-radius 0.12s linear 0s 0.35s linear 0s;
            transition: border-radius 0.12s linear 0s 0.35s linear 0s;

            &.active,
            &:hover {
                border-radius: 5px;
            }
        }

        img {
            display: block;
            height: auto;
            max-width: 100%;
        }

        &:after,
        &:before {
            content: " ";
            display: table;
        }
    }
}

.lSAction > {
    a {
        width: 32px;
        display: block;
        top: 50%;
        height: 32px;
        background-image: url(../img/controls.png);
        cursor: pointer;
        position: absolute;
        z-index: 2;
        margin-top: -16px;
        opacity: 0.5;
        -webkit-transition: opacity 0.35s linear 0s;
        transition: opacity 0.35s linear 0s;

        &:hover {
            opacity: 1;
        }
    }

    .lSPrev {
        background-position: 0 0;
        left: 10px;
    }

    .lSNext {
        background-position: -32px 0;
        right: 10px;
    }

    a.disabled {
        pointer-events: none;
    }
}

.cS-hidden {
    height: 1px;
    opacity: 0;
    filter: alpha(opacity = 0);
    overflow: hidden;
}

.lSSlideOuter {
    &.vertical {
        position: relative;

        &.noPager {
            padding-right: 0 !important;
        }

        .lSGallery {
            position: absolute !important;
            right: 0;
            top: 0;
        }

        .lightSlider > * {
            width: 100% !important;
            max-width: none !important;
        }

        .lSAction > {
            a {
                left: 50%;
                margin-left: -14px;
                margin-top: 0;
            }

            .lSNext {
                background-position: 31px -31px;
                bottom: 10px;
                top: auto;
            }

            .lSPrev {
                background-position: 0 -31px;
                bottom: auto;
                top: 10px;
            }
        }
    }

    &.lSrtl {
        direction: rtl;
    }

    .lSPager,
    .lightSlider {
        padding-left: 0;
        list-style: none;
    }

    &.lSrtl {
        .lSPager,
        .lightSlider {
            padding-right: 0;
        }
    }

    .lSGallery li,
    .lightSlider > * {
        float: left;
    }

    &.lSrtl {
        .lSGallery li,
        .lightSlider > * {
            float: right !important;
        }
    }

    .rightEnd {
        -webkit-animation: rightEnd 0.3s;
        animation: rightEnd 0.3s;
        position: relative;
    }

    .leftEnd {
        -webkit-animation: leftEnd 0.3s;
        animation: leftEnd 0.3s;
        position: relative;
    }

    &.vertical {
        .rightEnd {
            -webkit-animation: topEnd 0.3s;
            animation: topEnd 0.3s;
            position: relative;
        }

        .leftEnd {
            -webkit-animation: bottomEnd 0.3s;
            animation: bottomEnd 0.3s;
            position: relative;
        }
    }

    &.lSrtl {
        .rightEnd {
            -webkit-animation: leftEnd 0.3s;
            animation: leftEnd 0.3s;
            position: relative;
        }

        .leftEnd {
            -webkit-animation: rightEnd 0.3s;
            animation: rightEnd 0.3s;
            position: relative;
        }
    }
}

@-webkit-keyframes rightEnd {
    0%,
    100% {
        left: 0;
    }

    50% {
        left: -15px;
    }
}

@keyframes rightEnd {
    0%,
    100% {
        left: 0;
    }

    50% {
        left: -15px;
    }
}

@-webkit-keyframes topEnd {
    0%,
    100% {
        top: 0;
    }

    50% {
        top: -15px;
    }
}

@keyframes topEnd {
    0%,
    100% {
        top: 0;
    }

    50% {
        top: -15px;
    }
}

@-webkit-keyframes leftEnd {
    0%,
    100% {
        left: 0;
    }

    50% {
        left: 15px;
    }
}

@keyframes leftEnd {
    0%,
    100% {
        left: 0;
    }

    50% {
        left: 15px;
    }
}

@-webkit-keyframes bottomEnd {
    0%,
    100% {
        bottom: 0;
    }

    50% {
        bottom: -15px;
    }
}

@keyframes bottomEnd {
    0%,
    100% {
        bottom: 0;
    }

    50% {
        bottom: -15px;
    }
}

.lightSlider {
    &.lsGrab > * {
        cursor: -webkit-grab;
        cursor: -moz-grab;
        cursor: -o-grab;
        cursor: -ms-grab;
        cursor: grab;
    }

    &.lsGrabbing > * {
        cursor: move;
        cursor: -webkit-grabbing;
        cursor: -moz-grabbing;
        cursor: -o-grabbing;
        cursor: -ms-grabbing;
        cursor: grabbing;
    }
}
