    @import '../global';

    /**
     * @class Ext.carousel.Indicator
     */

    /**
     * @var {measurement} $carousel-indicator-size Size (width/height) of carousel indicator dots.
     */
    $carousel-indicator-size: .5em !default;

    /**
     * @var {measurement} $carousel-indicator-spacing
     * Amount of space between carousel indicator dots.
     */
    $carousel-indicator-spacing: .2em !default;

    /**
     * @var {measurement} $carousel-track-size Size of the track the carousel indicator dots are in.
     */
    $carousel-track-size: 1.5em !default;

    /**
     * Creates a theme UI for carousel indicator components.
     *
     * @param {string} $ui-label The name of the UI being created.
     *   Can not included spaces or special punctuation (used in class names)
     * @param {color} $color Base color for the UI.
     * @param {string} $gradient Default gradient for the UI.
     * @param {color} $active-color Active color for the UI.
     * @param {string} $active-gradient Active gradient for the UI.
     */
    @mixin sencha-carousel-indicator-ui($ui-label, $color, $gradient, $active-color, $active-gradient) {
      .x-carousel-indicator-#{$ui-label} span {
        @include background-gradient($color, $gradient);

        &.x-carousel-indicator-active {
          @include background-gradient($active-color, $active-gradient)
        }
      }
    }

    /**
     * @class Ext.carousel.Carousel
     */

    /**
     * Includes basic carousel formatting.
     */
    @mixin sencha-carousel {
      .x-carousel {
        position: relative;
        overflow: hidden;
      }

      .x-carousel-item {
        position: absolute;
        width: 100%;
        height: 100%;

        > * {
            position: absolute;
            width: 100%;
            height: 100%;
        }
      }

      .x-carousel-indicator {
        // @TODO: we should not have to cancel out the x-floating styling
        padding: 0;
        -webkit-border-radius: 0;
        border-radius: 0;
        -webkit-box-shadow: none;
        background-color: transparent;
        background-image: none;
      }

      .x-carousel-indicator {
        -webkit-box-flex: 1;

        @include display-box;
        @include box-pack(center);
        @include box-align(center);

        span {
          display: block;
          width: $carousel-indicator-size;
          height: $carousel-indicator-size;
          @if $include-border-radius { @include border-radius($carousel-indicator-size / 2); }
          margin: $carousel-indicator-spacing;
        }
      }

      .x-carousel-indicator-horizontal {
        height: $carousel-track-size;
        width: 100%;
      }

      .x-carousel-indicator-vertical {
        @include box-orient(vertical);
        width: $carousel-track-size;
        height: 100%;
      }

      $indicator-light: rgba(#fff, .1);
      $indicator-light-active: rgba(#fff, .3);
      $indicator-dark: rgba(#000, .1);
      $indicator-dark-active: rgba(#000, .3);

      @include sencha-carousel-indicator-ui('light', $indicator-light, 'flat', $indicator-light-active, 'flat');
      @include sencha-carousel-indicator-ui('dark', $indicator-dark, 'flat', $indicator-dark-active, 'flat');
    }