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

@import "../common";

@include export("showcase") {
    #{$showcase-class} {
        position: fixed;
        top: 50%;
        left: 50%;
        width: auto;
        height: auto;
        margin: 0;
        padding: 0;
        opacity: 0;
        z-index: $showcase-zindex;
        visibility: hidden;
        backface-visibility: hidden;
        transform: translate(-50%, -50%);
        transition: opacity $showcase-transition, visibility $showcase-transition;

        &.is-loading,
        &.is-single {
            #{$showcase-class-prev},
            #{$showcase-class-next},
            #{$showcase-class-tabs} {
                display: none !important;
            }
        }

        &.is-loading {
            #{$showcase-class-close} {
                display: none !important;
            }
        }
    }

    #{$showcase-class-close} {
        float: $align-opposite-direction;
        line-height: 1rem;
        background: none;
        border: 0;
        padding: 0;
        margin-#{$align-direction}: 1rem;
    }

    #{$showcase-class-caption} {
        opacity: 0;
        transition: opacity $showcase-transition, visibility $showcase-transition;
    }

    #{$showcase-class-inner} {
        position: relative;
        margin-bottom: $padding;
    }

    #{$showcase-class-items} {
        @include reset-list;
        width: 100px;
        height: 100px;
        position: relative;
        overflow: hidden;
        transition: width $showcase-transition, height $showcase-transition;

        > li {
            position: absolute;
            top: 0;
            #{$align-direction}: 0;
            opacity: 0;
            transition: opacity $showcase-transition, visibility $showcase-transition;

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