/* Carousel Base */

@import "../sadui";

.carousel {
    
    // Reset
    * {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }


    @include user-select(none);
    overflow: visible;

    &, *:focus {
        outline-width: 0;
    }
}

// this needs dimension
.carousel-content-wrapper {
    // z-index: $zModule+11;
    overflow: hidden;
    position: relative;
    width: 100%;

    // fixes z-index bug in Chrome
    -webkit-transform: translate3d(0px, 0px, 0px);
}

.carousel-handle {
    display: none;
    // height: 100%;
    // position: absolute;
    // width: 100%;
    // display: block;
    // z-index: $zTemplateTop;
}

.carousel-content {
    // z-index: $zModule+10;
    // min-height: 100px;

    list-style: none;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    white-space: nowrap;

    &.is-animate {
        @include transition-property(translate3d);
        @include transition-duration($transitionDurationBase);
        @include transition-timing-function(ease-in-out);            
    }
}

.carousel-content-item {
    @include inline-block;
    vertical-align: top;
    height: 100%;
}

%carousel-navigation-item {
    // position: absolute;
    // z-index: $zModule+8;
    // top: 0;

    cursor: pointer;
    // height: 100%;
    width: $carouselNavigationItemWidth;
    height: $carouselNavigationItemWidth;

    &.is-disabled,
    &[disabled] {
        visibility: hidden;
        cursor: default;
    }
    .label {
        @include hide-text;
        display: block;
        left: 0;
        right: 0;
        margin: 0 auto;
        top: 50%;
        position: absolute;
    }
}
.carousel-navigation-item-back {
    @extend %carousel-navigation-item;
    left: 0;
    .label {
        // ui-sprite(carousel-arrow-back);
    }
}
.carousel-navigation-item-forward {
    @extend %carousel-navigation-item;
    right: 0;
    .label {
        // ui-sprite(carousel-arrow-forward);
    }
}

.carousel-pagination {
    position: absolute;
}
.carousel-background {
    z-index: $zModule;
    left: 0;
    right: 0;
    height: 100%;
    .carousel-background-item {
        height: 100%;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
    }
}

.carousel-pagination {

    z-index: $zModule+20;

   // .carousel-pagination-item {
        // @extend %bullet-item;

        // .carousel-pagination-bullet {
            // @extend %bullet;
        // }

        // .carousel-pagination-label {
            // @extend %bullet-item-label;
        // }

    // }
}