/*

Sliders

For modals is used the excellent [**BxSlider**](http://bxslider.com/) jQuery plugin,
see full documentation for more in depth examples.

Script required:

    <script src="//cdn.jsdelivr.net/bxslider/4.1.1/jquery.bxslider.js"></script>

Markup:
<ul class="slider">
  <li><img src="http://placehold.it/800x300/c7e843/fff.jpg" /></li>
  <li><img src="http://placehold.it/800x300/f6ab48/fff.jpg" /></li>
  <li><img src="http://placehold.it/800x300/3dced4/fff.jpg" /></li>
</ul>
<script type="text/javascript">
  $(document).ready(function() {
    $('.slider').bxSlider({
      nextText: '<i></i><span>Next</span>', // replace text with icon-font
      prevText: '<i></i><span>Prev</span>', // replace text with icon-font
    });
  });
</script>

Styleguide 16

*/


@if $slider {

    .bx-wrapper {
        position: relative;
        padding: 0;
        *zoom: 1;
        z-index: $zindex-slider;
        margin-bottom: rhythm();

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

        ul {@extend .list_style_none;}
    }

    .bx-viewport { }

// Directions

    .bx-controls-direction {
        a {
            @extend %slider__btn !optional;
            @include position(absolute, 50% 0 0 0);

            z-index: 200;

            i {font-style: normal;}
            span {@extend .visuallyhidden;}
        }

        .disabled { display: none; }

    }

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

// Pager

    .bx-pager {
        width: 100%;
        text-align: center;
        @extend %slider__pager !optional;

    }

    .bx-pager-item {
        display: inline-block;
        a {
            display: inline-block;
            // @include hide-text;
        }
    }

// Loading

    .bx-loading {
        @include square(100%);
        @include position(absolute, 0px 0 0 0px);
        @extend %slider__loading-style  !optional;
        z-index: 2000;
    }


// Captions

    .bx-caption {
        @include position(absolute, 0 0 0px 0px);
        width: 100%;

        span {
            display: inline-block;
            @extend %slider__caption !optional;
        }
    }

}