/**
 * @copyright   2010-2013, The Titon Project
 * @license     http://opensource.org/licenses/bsd-license.php
 * @link        http://titon.io
 */

@import "../common";

/**
 * Should be used in conjunction with the JavaScript Titon.Carousel module.
 *
 *    <div class="carousel">
 *        <ul class="carousel-items">
 *            <li>
 *                <img src="/path/to/image.jpg">
 *                <div class="carousel-caption">Image caption</div>
 *            </li>
 *        </ul>
 *        <ol class="carousel-tabs">
 *            <li><a href=""></a></li>
 *        </ol>
 *        <a href="javascript:;" class="carousel-prev">
 *            <span class="icon-chevron-sign-left"></span>
 *        </a>
 *        <a href="javascript:;" class="carousel-next">
 *            <span class="icon-chevron-sign-right"></span>
 *        </a>
 *    </div>
 */

.carousel {
    // 16:9
    max-width: 640px;
    max-height: 360px;
    width: 100%;
    height: auto;
    margin: 0 auto;
    text-align: left;
    position: relative;
    overflow: hidden;
}

.carousel-items {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 1;
    @include transition(left 1s, top 1s);

    > li {
        position: relative;
        width: 100%;
        height: auto;
        z-index: 1;
        display: block;

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

        .carousel-caption {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: $padding;
            color: #fff;
            background: black(.70);
        }
    }
}

.carousel-prev,
.carousel-next {
    display: block;
    position: absolute;
    padding: $padding;
    width: auto;
    height: auto;
    z-index: 5;
    font-size: 28px;
    color: #fff;
    opacity: .65;
    top: 50%;
    @include transform(translateY(-50%)); // move up 50% of their height

    &:hover {
        color: #fff;
        opacity: 1;
    }

    &:focus {
        outline: none;
    }

    // Large icons for large resolutions
    @include if-tablet-landscape {
        .carousel-prev,
        .carousel-next {
            font-size: 56px;
        }
    }
}

.carousel-prev { left: 0; }
.carousel-next { right: 0; }

.carousel-tabs {
    list-style: none;
    line-height: 100%;
    margin: 0;
    padding: $padding;
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 5;
    @include transform(translateX(-50%)); // move left 50% of their width

    li {
        display: inline-block;
        margin: 0 3px;
    }

    a {
        display: inline-block;
        border: 2px solid #fff;
        height: 10px;
        width: 10px;
        border-radius: 50%;
        opacity: .65;

        &:hover { opacity: 1; }
        &.is-active { background: #fff; }
    }

    // Hide if no tabs
    &:empty { display: none; }
}

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

.carousel.slide {
    .carousel-items {
        @include clear-fix;

        > li {
            float: left;
        }
    }
}

.carousel.fade {
    .carousel-items {
        height: 360px; // needs a base height because slides are absolute

        > li {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            z-index: 1;
            @include transition(opacity 1s);

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