// Main
$border-size: 10px;
$slider-inner-width: 800px;
$slider-inner-height: 400px;
// CODEPEN: Did you know that if you put cursor (caret) in color #text and press [ALT] key you can choose color form picker?
$slider-main-color: #71ad37;
$slider-back-color: #3a3a3a;
$max-slides: 10;

// Dot
$dot-outer-size: 4px;
$dot-inner-size: 6px;
$dot-distance: 4px;
$dot-distance-top: 10px;
$dot-main-color: $slider-main-color;
$dot-back-color: $slider-back-color;

// Arrow
$arrow-type: "lite"; // standard | lite
$arrow-size: 13px;
$arrow-distance: 15px;
$arrow-hover-shift: 0px;
$arrow-color: $slider-back-color;
$arrow-hover-color: $slider-main-color;

$speed: 0.5s;
$easing: cubic-bezier(0.4, 1.3, 0.65, 1); // ease-out

/*___________________________________ SIGN ___________________________________ */
// More info here: https://codepen.io/drygiel/pen/KbhmA
$sign-x: 255px;
$sign-y: 84px;
$sign-frames: 85;
$sign-duration: 3.5s;
$sign-total: $sign-frames * -$sign-y;

#dex-sign {
    width: $sign-x;
    height: $sign-y;
    position: absolute;
    left: 33%;
    top: 45%;
    opacity: 0.7;
    background: url(https://www.drygiel.com/projects/sign/frames-255-white.png)
        0 0 no-repeat;
    &:hover {
        opacity: 1;
        filter: invert(30%) brightness(80%) sepia(100%) contrast(110%)
            saturate(953%) hue-rotate(45deg);
    }
}
@keyframes sign-anim {
    to {
        background-position: 0 $sign-total;
    }
}

/*___________________________________ SIGN ___________________________________ */

/*#region MODULES */

@mixin repeat($pattern) {
    // $to_repeat: ~'${pattern}';
    //     $result: ~`(function(){
    //         var result = '';

    //         for(var i=1; i < ${max-slides} + 2; i++) {
    //             result += "${to_repeat}\n"
    //                       .replace(/\s*\$im1\s*/g, i - 1)
    //                       .replace(/\s*\$ip1\s*/g, i + 1)
    //                       .replace(/\s*\$i\s*/g, i);
    //         }
    //         return result.replace(/[,\s]+$/,'');
    //     })()`;
    #{$pattern} {
        @content;
    }
}

@mixin render-arrow-light() {
    $arrow-thickness: 2px;
    $arrow-thickness-hover: 3px;

    .csslider > .arrows {
        position: absolute;
        left: -$arrow-size - 3px - $arrow-distance;
        top: 50%;
        width: 100%;
        height: 2 * $arrow-size;
        padding: 0 $arrow-size + 3px + $arrow-distance;
        z-index: 0;
        box-sizing: content-box;

        label {
            display: none;
            position: absolute;
            top: -50%;
            padding: $arrow-size;
            box-shadow: inset $arrow-thickness -$arrow-thickness 0 (
                    $arrow-thickness - 1px
                ) $arrow-color;
            cursor: pointer;
            transition: box-shadow 0.15s, margin 0.15s;

            &:hover {
                box-shadow: inset $arrow-thickness-hover -$arrow-thickness-hover
                    0 ($arrow-thickness-hover - 1px) $arrow-hover-color;
                margin: 0 -$arrow-hover-shift;
            }

            &:before {
                content: "";
                position: absolute;
                top: -100%;
                left: -100%;
                height: 300%;
                width: 300%;
            }
        }
    }

    // Left conditions

    @include repeat(
            ".csslider > input:nth-of-type(  $i  ):checked ~ .arrows > label:nth-of-type(  $im1  ),"
        )
        // .csslider.infinity > input:first-of-type:checked ~ .arrows label.goto-last,
 {
        display: block;
        left: 0;
        right: auto;
        transform: rotate(45deg);
    }

    // Right conditions

    @include repeat(
            ".csslider > input:nth-of-type(  $i  ):checked ~ .arrows > label:nth-of-type(  $ip1  ),"
        )
        // .csslider.infinity > input:last-of-type:checked ~ .arrows label.goto-first,
 {
        display: block;
        right: 0;
        left: auto;
        transform: rotate(225deg);
    }
}

@mixin render-arrow-standard() {
    .csslider > .arrows {
        position: absolute;
        left: -$arrow-size - $arrow-distance + 2px;
        top: 50%;
        width: 100%;
        height: 2 * $arrow-size;
        padding: 0 $arrow-size + $arrow-distance - 2px;
        z-index: 0;
        box-sizing: content-box;

        label {
            display: none;
            position: absolute;
            top: -50%;
            width: 0;
            height: 0;
            border-top: $arrow-size solid transparent;
            border-bottom: $arrow-size solid transparent;
            border-left: $arrow-size solid $arrow-color;
            border-right: $arrow-size solid $arrow-color;
            cursor: pointer;
            transition: margin 0.15s;

            &:hover {
                border-left-color: $arrow-hover-color;
                border-right-color: $arrow-hover-color;
                margin: 0 -$arrow-hover-shift;
            }

            &:before {
                content: "";
                position: absolute;
                top: -$arrow-size;
                left: -$arrow-size - $arrow-hover-shift - $arrow-distance;
                height: $arrow-size * 2;
                width: 2 * ($arrow-size + $arrow-distance + $arrow-hover-shift);
            }
        }
    }

    // Left conditions

    @include repeat(
            ".csslider > input:nth-of-type(  $i  ):checked ~ .arrows > label:nth-of-type(  $im1  ),"
        )
        // .csslider.infinity > input:first-of-type:checked ~ .arrows label.goto-last,
 {
        display: block;
        left: 0;
        right: auto;
        border-left: none;
    }

    // Right conditions
    @include repeat(
            ".csslider > input:nth-of-type(  $i  ):checked ~ .arrows > label:nth-of-type(  $ip1  ),"
        )
        // .csslider.infinity > input:last-of-type:checked ~ .arrows label.goto-first,
 {
        display: block;
        right: 0;
        left: auto;
        border-right: none;
    }
}

/*#endregion */

@include render-arrow-light(); // render-arrow-standard();

.csslider {
    -webkit-perspective: 1300px;
    perspective: 1300px;
    display: inline-block;
    text-align: left;
    position: relative;
    margin-bottom: $dot-distance + $dot-distance-top + 2 * $dot-outer-size;

    > input {
        display: none;

        @for $index from $max-slides through 1 {
            &:nth-of-type(#{index}):checked ~ ul li:first-of-type {
                margin-left: -100% * ($index - 1);
            }
        }
    }

    > ul {
        position: relative;
        width: $slider-inner-width + 2 * $border-size;
        height: $slider-inner-height + 2 * $border-size;
        z-index: 1;
        font-size: 0;
        line-height: 0;
        background-color: $slider-back-color;
        border: $border-size solid $slider-back-color;
        margin: 0 auto;
        padding: 0;
        overflow: hidden;
        white-space: nowrap;
        box-sizing: border-box;

        > li {
            position: relative;
            display: inline-block;
            width: 100%;
            height: 100%;
            overflow: hidden;
            font-size: 15px;
            font-size: initial;
            line-height: normal;
            transition: all $speed $easing;
            vertical-align: top;
            box-sizing: border-box;
            white-space: normal;

            &.scrollable {
                overflow-y: scroll;
            }
        }
    }

    > .navigation {
        position: absolute;
        bottom: -2 * $dot-outer-size;
        left: 50%;
        z-index: 10;
        margin-bottom: -$dot-distance-top;
        font-size: 0;
        line-height: 0;
        text-align: center;
        user-select: none;

        > div {
            margin-left: -100%;
        }

        label {
            position: relative;
            display: inline-block;
            cursor: pointer;
            border-radius: 50%;
            margin: 0 $dot-distance;
            padding: $dot-outer-size;
            background: $dot-back-color;

            &:hover:after {
                opacity: 1;
            }

            &:after {
                content: "";
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -$dot-inner-size;
                margin-top: -$dot-inner-size;
                background: $dot-main-color;
                border-radius: 50%;
                padding: $dot-inner-size;
                opacity: 0;
            }
        }
    }

    > .arrows {
        user-select: none;

        .goto-first,
        .goto-last {
        }
    }

    &.inside .navigation {
        bottom: $border-size;
        margin-bottom: $dot-distance-top;

        label {
            border: 1px solid #7e7e7e;
        }
    }
}

@include repeat(
    ".csslider > input:nth-of-type(  $i  ):checked ~ .navigation label:nth-of-type(  $i  ):after,"
);
#{result} {
    opacity: 1;
}

/*___________________________________ LAYOUT ___________________________________ */
@import url(https://fonts.googleapis.com/css?family=Raleway:400,700|Lato);

* {
    margin: 0;
    padding: 0;
}

::-webkit-scrollbar {
    width: 2px;
    background: rgba(255, 255, 255, 0.1);
}

::-webkit-scrollbar-track {
    background: none;
}

::-webkit-scrollbar-thumb {
    background: rgba(74, 168, 0, 0.6);
}

ul,
ol {
    padding-left: 40px;
}

html,
body {
    height: 100%;
    overflow-x: hidden;
    text-align: center;
    font: 400 100% "Raleway", "Lato";
    background-color: #282828;
    color: #ccc;
}

body {
    padding-bottom: 60px;
}

h1 {
    font-weight: 700;
    font-size: 310%;
}

h2 {
    font-weight: 400;
    font-size: 120%;
    color: #71ad37;
}

#slider1 {
    margin: 20px;
    font-family: "Lato";
}

#slider1 > ul > li:nth-of-type(3) {
    background: url(https://raw.github.com/drygiel/csslider/master/examples/themes/fruit.jpg);
}

// On Slide 3 Reached Event
// Transition is added here to instantly hide when slide is changed
#slider1 > input:nth-of-type(3):checked ~ ul #bg {
    width: 80%;
    padding: 22px;
    transition: 0.5s 0.5s;
}

#slider1 > input:nth-of-type(3):checked ~ ul #bg div {
    transform: translate(0);
    transition: 0.5s 0.9s;
}

#slider1 > input:nth-of-type(6):checked ~ ul #dex-sign {
    animation: sign-anim $sign-duration 0.5s steps($sign-frames) forwards;
}

#bg {
    color: #000;
    padding: 22px 0;
    position: absolute;
    left: 0;
    top: 16%;
    height: 20%;
    width: 0;
    z-index: 10;
    overflow: hidden;
}
// Blurry background
#bg:before {
    content: "";
    position: absolute;
    left: -1px;
    top: 1px;
    height: 100%;
    width: 100%;
    z-index: -1;
    background: url(https://raw.github.com/drygiel/csslider/master/examples/themes/fruit.jpg)
        1px 23%;
    -webkit-filter: blur(7px);
}

#bg:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 20;
    background: rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

#bg div {
    transform: translate(120%);
}

.scrollable p {
    padding: 30px;
    text-align: justify;
    line-height: 140%;
    font-size: 120%;
}

#center {
    text-align: center;
    margin-top: 25%;

    a {
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-variant: small-caps;
    }
}
/*___________________________________ LINK ___________________________________ */
// More info here: https://codepen.io/drygiel/pen/hkgGq
a.nice-link {
    $color: $slider-main-color;
    $hover-color: lighten(adjust-hue(saturate($color, 50%), -8), 8%);

    position: relative;
    color: $color;
    h1 &:after {
        border-bottom: 1px solid $hover-color; // Underline
    }

    &:after {
        text-align: justify;
        display: inline-block;
        content: attr(data-text);
        position: absolute;
        left: 0;
        top: 0;
        white-space: nowrap;
        overflow: hidden;
        color: $hover-color;
        min-height: 100%;
        width: 0;
        max-width: 100%; // 'cause of IE bug
        background: $slider-back-color;
        transition: 0.3s;
    }

    &:hover {
        color: $color; // To override default hover color

        &:after {
            width: 100%;
        }
    }
}