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

@import "../common";

.#{$vendor-prefix}showcase {
    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 {
        .#{$vendor-prefix}showcase-prev,
        .#{$vendor-prefix}showcase-next,
        .#{$vendor-prefix}showcase-tabs {
            display: none !important;
        }
    }

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

.#{$vendor-prefix}showcase-close {
    float: right;
    line-height: 1rem;
    background: none;
    border: 0;
    padding: 0;
    margin-left: 1rem;
}

.#{$vendor-prefix}showcase-caption {
    opacity: 0;
    transition: opacity $showcase-transition, visibility $showcase-transition;
}

.#{$vendor-prefix}showcase-inner {
    position: relative;
    margin-bottom: $padding;
}

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

    > li {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        transition: opacity $showcase-transition, visibility $showcase-transition;

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

.#{$vendor-prefix}showcase-prev,
.#{$vendor-prefix}showcase-next {
    display: block;
    position: absolute;
    z-index: 5;
    top: 50%;
    background: none;
    padding: 0;
    border: 0;
    transform: translateY(-50%); // move up 50% of their height

    &:focus { outline: none; }
}

.#{$vendor-prefix}showcase-prev { left: $padding; }
.#{$vendor-prefix}showcase-next { right: $padding; }

.#{$vendor-prefix}showcase-tabs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: $padding;
    text-align: center;
}