/**
 * @copyright   2010-2015, The Titon Project
 * @license     http://opensource.org/licenses/BSD-3-Clause
 * @link        http://titon.io
 */

@import "../common";

@include export("carousel") {
    #{$carousel-class} {
        position: relative;
        max-width: 100%;

        &.no-next #{$carousel-class-next},
        &.no-prev #{$carousel-class-prev} { display: none; }
    }

    #{$carousel-class-items} {
        /* 4:3 ratio */
        padding-bottom: 75%;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        position: relative;

        > ul {
            @include reset-list;
            position: absolute;
            top: 0;
            #{$align-direction}: 0;
            transition: left $carousel-transition, top $carousel-transition, right $carousel-transition;
            width: 100%;
            height: 100%;

            > li {
                width: 100%;
                height: 100%;
                position: relative;

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

    //-------------------- Animations --------------------//

    #{$carousel-class}.slide {
        #{$carousel-class-items} > ul {
            > li {
                float: $align-direction;
            }

            @include clear-fix;
        }
    }

    #{$carousel-class}.fade {
        #{$carousel-class-items} > ul {
            position: relative;

            > li {
                position: absolute;
                top: 0;
                #{$align-direction}: 0;
                opacity: 0;
                z-index: 1;
                transition: opacity $carousel-transition, visibility $carousel-transition;

                &.show { z-index: 5; }
            }
        }
    }

    //-------------------- Modifiers --------------------//

    @if index($carousel-modifiers, "wide") {
        #{$carousel-class-modifier-wide} {
            #{$carousel-class-items} {
                padding-bottom: 56.25%; // 16:9 ratio
            }
        }
    }

    @if index($carousel-modifiers, "square") {
        #{$carousel-class-modifier-square} {
            #{$carousel-class-items} {
                padding-bottom: 100%; // 1:1 ratio
            }
        }
    }
}