/*
 * CSS Fadeshow by @alexerlandsson
 * This is a fadeshow built in CSS and with customization in focus.
 * Supports quick navigation, prev/next navigation and autoplay.
 * 
 * For better documentation and implementation guide, check out the GitHub repository:
 * https://github.com/alexerlandsson/css-fadeshow
*/


/*
 * ===== VARIABLES =====
 *
 * Change these variables to match your preferences. For a more detailed
 * description of what each variable do, visit https://github.com/alexerlandsson/css-fadeshow
 */

$max-slides:                    5;
$prefix:                            true;
$responsive:                    true;
$breakpoint-small:          500px;
$fade-time:                     1;
$prev-next-fontfamily:      sans-serif;
$prev-next-icon-size:       3vw;
$prev-next-icon-color:      rgba(255,255,255,0.5);
$prev-next-bg:                  rgba(255,255,255,0);
$prev-next-bg-hover:            rgba(255,255,255,0.1);
$prev-icon:                     '❮';
$next-icon:                     '❯';
$autohide-next-prev:            true;
$quick-nav-color:               rgba(255,255,255,0.8);
$quick-nav-active-color:    coral;
$fade-color:                    #fff;
$autoplay:                      true;
$autoplay-duration:         5;


/*
 * ===== MIXINS =====
 *
 * This section contains mixin used
 * Do not change anything here unless you know what you are doing.
 */

/* Mixins to handle prefixes */

@mixin fadeshow-transition($value...) {
    @if length($value) < 1 {
        $value: all 150ms linear;
    }
    @if $prefix == true {
        -webkit-transition: $value;
    }
                  transition: $value;
}

@mixin fadeshow-transform($value...) {
    @if length($value) < 1 {
        $value: all 150ms linear;
    }
    @if $prefix == true {
        -webkit-transform: $value;
             -ms-transform: $value;
    }
                  transform: $value;
}

@mixin fadeshow-animation($value...) {
    @if $prefix == true {
        -webkit-animation: $value;
    }
                  animation: $value;
}

@mixin fadeshow-animation-delay($value) {
    @if $prefix == true {
        -webkit-animation-delay: $value;
    }
                  animation-delay: $value;
}

@mixin fadeshow-unselectable() {
    @if $prefix == true {
        -webkit-user-select: none;
           -moz-user-select: none;
             -ms-user-select: none;
    }
                  user-select: none;
}

/* Mixins to handle Quick Navigation Button states */

@mixin quickNavBtnActive() {
    background-color: $quick-nav-active-color;
}

@mixin quickNavBtnInactive() {
    background-color: $quick-nav-color;
}


/*
 * ===== FADESHOW =====
 *
 * Base functionality for the fadeshow.
 * Do not change anything here unless you know what you are doing.
 */

[data-am-fadeshow] {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: $fade-color;

    /* Slides */
    .fs-slide {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        opacity: 0;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        @include fadeshow-transition(opacity #{$fade-time}s ease);

        /* Display first child on load */
        &:first-child {
            opacity: 1;
        }
    }

    /* Quick Navigation */
    .fs-quick-nav {
        position: absolute;
        bottom: 15px;
        left: 50%;
        z-index: 1;
        @include fadeshow-unselectable();
        @include fadeshow-transform(translateX(-50%));
    }

    .fs-quick-btn {
        display: inline-block;
        width: 15px;
        height: 15px;
        margin: 0 2px;
        border-radius: 50%;
        cursor: pointer;
        @include fadeshow-transition(opacity 200ms ease);
        @include quickNavBtnInactive();

        &:hover {
            opacity: 0.8;
        }

        /* Set active state to first button on load */
        &:first-child {
            @include quickNavBtnActive();
        }
    }

    /* Prev/Next Navigation */
    %prev-next {
        position: absolute;
        display: none;
        top: 0;
        bottom: 0;
        width: 100px;
        cursor: pointer;
        font-family: $prev-next-fontfamily;
        background-color: $prev-next-bg;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        @include fadeshow-transition(all 200ms ease);

        @if $responsive == true {
            @media (max-width: $breakpoint-small) {
                width: 50%;
            }
        }

        &:before {
            position: absolute;
            top: 50%;
            font-size: $prev-next-icon-size;
            color: $prev-next-icon-color;
        }

        &:hover {
            background-color: $prev-next-bg-hover;
            @if $responsive == true {
                @media (max-width: $breakpoint-small) {
                    background-color: rgba(255,255,255,0);
                }
            }
        }
    }

    .fs-prev-btn {
        @extend %prev-next;
        left: 0;

        &:before {
            content: "#{$prev-icon}";
            left: 50%;
            @include fadeshow-transform(translate(-50%, -50%));
            @if $responsive == true {
                @media (max-width: $breakpoint-small) {
                    left: 30px;
                }
            }
        }

        @if $autohide-next-prev == true {
            @include fadeshow-transform(translateX(-100%));
            @if $responsive == true {
                @media (max-width: $breakpoint-small) {
                    @include fadeshow-transform(translate(0));
                }
            }
        }
    }

    .fs-next-btn {
        @extend %prev-next;
        right: 0;

        &:before {
            content: "#{$next-icon}";
            right: 50%;
            @include fadeshow-transform(translate(50%, -50%));
            @if $responsive == true {
                @media (max-width: $breakpoint-small) {
                    right: 30px;
                }
            }
        }

        @if $autohide-next-prev == true {
            @include fadeshow-transform(translateX(100%));
            @if $responsive == true {
                @media (max-width: $breakpoint-small) {
                    @include fadeshow-transform(translate(0));
                }
            }
        }
    }

    /* Base functionality */
    input[type="radio"] {
        position: fixed;
        top: -9999px;

        &:checked {

            /* This loop handles the slide switching and quick navigation active state */
            $i: $max-slides;

            @while $i > 0 {

                &:nth-of-type(#{$i}) {
                    /* Show slide */
                    ~ .fs-slides {
                        .fs-slide {
                            //Cancel autoplay
                            opacity: 0;
                            @include fadeshow-animation(none !important);
                        }
                        .fs-slide:nth-child(#{$i}) {
                            opacity: 1;
                        }
                    }

                    /* Add active state to dot */
                    ~ .fs-quick-nav {
                        .fs-quick-btn {
                            @include quickNavBtnInactive();
                            /* Cancel autoplay */
                            @include fadeshow-animation(none !important);
                        }
                        .fs-quick-btn:nth-child(#{$i}) {
                            background-color: $quick-nav-active-color;
                            &:hover {
                                opacity: 1;
                            }
                        }
                    }

                }
                $i: $i - 1;
            }

            /* Hide navigation if only one slide */
            &:first-of-type:last-of-type {
                ~ .fs-quick-nav,
                ~ .fs-prev-nav,
                ~ .fs-next-nav {
                    display: none !important;
                }
            }

        }
    }

    /* Autohide Prev/Next Navigation */
    @if $autohide-next-prev == true {
        &:hover {
            .fs-prev-btn,
            .fs-next-btn {
                @include fadeshow-transform(translateX(0));
            }
        }
    }

}


/*
 * ===== PREV/NEXT NAVIGATION =====
 *
 * This section handles the prev/next navigation.
 */

/* Handle Prev/Next buttons */
[data-am-fadeshow~="next-prev-navigation"] {
    input[type="radio"] {

        &:checked {

            $i: $max-slides;

            @while $i > 0 {

                &:nth-of-type(#{$i}) {

                    $prev: ($i - 1);
                    $next: ($i + 1);

                    /* Show previous button */
                    @if $prev > 0 {
                        ~ .fs-prev-nav {
                            .fs-prev-btn {
                                display: none;
                            }
                            .fs-prev-btn:nth-child(#{$prev}) {
                                display: block;
                            }
                        }
                    }

                    /* Show next button */
                    @if $next < ($max-slides + 1) {
                        ~ .fs-next-nav {
                            .fs-next-btn {
                                display: none;
                            }
                            .fs-next-btn:nth-child(#{$next}) {
                                display: block;
                            }
                        }
                    }

                    /* Show last prev button if first slide */
                    &:first-of-type {
                        ~ .fs-prev-nav {
                            .fs-prev-btn:last-child {
                                display: block;
                            }
                        }
                    }

                    /* Show first next button if last slide */
                    &:last-of-type {
                        ~ .fs-next-nav {
                            .fs-next-btn:first-child {
                                display: block;
                            }
                        }
                    }

                }
              $i: $i - 1;
            }
        }
    }

    /* Display first pair of Prev/Next Buttons on load */
    .fs-prev-btn:last-child {
        display: block;
    }

    .fs-next-btn:nth-child(2) {
        display: block
    }

}


/*
 * ===== AUTOPLAY =====
 *
 * Functions to handle autoplay.
 * If you're not going to use autoplay, set $autoplay to false.
 * This part tends to compile into a lot of uneccesary CSS otherwise.
 */

@if $autoplay == true {

    $i: $max-slides;

    @while $i > 1 {

        $total-duration: $autoplay-duration * $i;

        @keyframes quickNavAnimation-#{$i} {
            0% { @include quickNavBtnInactive();  }
            #{100% * $fade-time / $total-duration},
            #{100% * $autoplay-duration / $total-duration} { @include quickNavBtnActive(); }
            #{100% * ($autoplay-duration + $fade-time) / $total-duration},
            100% { @include quickNavBtnInactive(); }
        }
        @if $prefix == true {
            @-webkit-keyframes quickNavAnimation-#{$i} {
                0% { @include quickNavBtnInactive();  }
                #{100% * $fade-time / $total-duration},
                #{100% * $autoplay-duration / $total-duration} { @include quickNavBtnActive(); }
                #{100% * ($autoplay-duration + $fade-time) / $total-duration},
                100% { @include quickNavBtnInactive(); }
            }
        }

        @keyframes slidesAnimation-#{$i} {
            0% { opacity: 0; }
            #{100% * $fade-time / $total-duration},
            #{100% * $autoplay-duration / $total-duration} { opacity: 1; }
            #{100% * ($autoplay-duration + $fade-time) / $total-duration},
            100% { opacity: 0; }
        }
        @if $prefix == true {
            @-webkit-keyframes slidesAnimation-#{$i} {
                0% { opacity: 0; }
                #{100% * $fade-time / $total-duration},
                #{100% * $autoplay-duration / $total-duration} { opacity: 1; }
                #{100% * ($autoplay-duration + $fade-time) / $total-duration},
                100% { opacity: 0; }
            }
        }

        [data-am-fadeshow~="autoplay"] {
            input[type="radio"]:nth-of-type(#{$i}):last-of-type {

                /* Slide animation */
                ~ .fs-slides {
                    .fs-slide {
                        @include fadeshow-animation(slidesAnimation-#{$i} #{$total-duration}s infinite);
                    }
                }

                /* Quick navigation animation */
                ~ .fs-quick-nav {
                    .fs-quick-btn {
                        @include fadeshow-animation(quickNavAnimation-#{$i} #{$total-duration}s infinite);
                    }
                }

                /* Animation Delay */
                @for $j from 1 through $i {
                    ~ .fs-slides .fs-slide:nth-child(#{$j}),
                    ~ .fs-quick-nav .fs-quick-btn:nth-child(#{$j}) {
                        $animation-delay: #{($j - 1) * ($autoplay-duration) - $fade-time}s;
                        @include fadeshow-animation-delay(#{$animation-delay});
                    }
                }

            }
            $i: $i - 1;
        }
    }
}

/* Base Styling */
 
.container1 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    overflow: hidden;
}