@import 'ext-base';

@if $include_carousel == true {
  .x-carousel > .x-panel-body {
    display: -webkit-box;
    -webkit-box-orient: vertical;

    > .x-scroller {
      -webkit-box-flex: 1;
      display: -webkit-box;
      -webkit-box-orient: horizontal;
    }
  }

  .x-carousel-vertical > .x-panel-body > .x-scroller {
    -webkit-box-orient: vertical;
  }

  .x-carousel-indicator {
    position: absolute;
    z-index: 1;
    vertical-align: middle;
    text-align: center;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
          
    &.x-carousel-indicator-horizontal {
      height: 30px;
      bottom: 0;
      left: 0;      
      width: 100%;
      -webkit-box-orient: horizontal;
    }
    
    &.x-carousel-indicator-vertical {
      width: 30px;
      height: 100%;
      right: 0;
      top: 0;
      -webkit-box-orient: vertical;
    }
    
    span {
      width: 8px;
      height: 8px;
      -webkit-border-radius: 4px;
      display: block;
      margin: 3px;
      background-color: rgba(0,0,0,.3);

      &.x-carousel-indicator-active {
        background-color: rgba(0,0,0,1);
      }
    }

    &.x-carousel-indicator-light span {
      background-color: rgba(255,255,255,.3);

      &.x-carousel-indicator-active {
        background-color: rgba(255,255,255,1);
      }
    }
  }
}