// Orbit Settings
$include-html-orbit-classes: $include-html-classes !default;

// We use these to control the caption styles
$orbit-container-bg: #f5f5f5 !default;
$orbit-caption-bg-old: rgb(0,0,0) !default;
$orbit-caption-bg: rgba(0,0,0,0.6) !default;
$orbit-caption-font-color: #fff !default;

// We use these to control the left/right nav styles
$orbit-nav-bg-old: rgb(0,0,0) !default;
$orbit-nav-bg: rgba(0,0,0,0.6) !default;

// We use these to control the timer styles
$orbit-timer-bg-old: rgb(0,0,0) !default;
$orbit-timer-bg: rgba(0,0,0,0.6) !default;

// We use these to control the bullet nav styles
$orbit-bullet-nav-color: #999 !default;
$orbit-bullet-nav-color-active: #222 !default;

// We use thes to controls the style of slide numbers
$orbit-slide-number-bg: rgba(0,0,0,0) !default;
$orbit-slide-number-font-color: #fff !default;
$orbit-slide-number-padding: emCalc(5px) !default;

// Graceful Loading Wrapper and preloader
$wrapper-class: "slideshow-wrapper" !default;
$preloader-class: "preloader" !default;


@if $include-html-orbit-classes != false {

  @if $experimental {
    @-webkit-keyframes rotate {
      from { -webkit-transform: rotate(0deg); }
      to { -webkit-transform: rotate(360deg); }
    }
    @-moz-keyframes rotate {
      from { -webkit-transform: rotate(0deg); }
      to { -webkit-transform: rotate(360deg); }
    }
    @-o-keyframes rotate {
      from { -webkit-transform: rotate(0deg); }
      to { -webkit-transform: rotate(360deg); }
    }
  }
  @keyframes rotate {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
  }

  /* Orbit Graceful Loading */
  .#{$wrapper-class} {
    position: relative;

    ul {
      // Prevent bullets showing before .orbit-container is loaded
      list-style-type: none;
      margin: 0;

      // Hide all list items
      li,
      li .orbit-caption { display: none; }

      // ...except for the first one
      li:first-child { display: block; }
    }

    .orbit-container { background-color: transparent;

      // Show images when .orbit-container is loaded
      li { display: block;

        .orbit-caption { display: block; }
      }
    }
  }

  // Orbit preloader
  .#{$preloader-class} {
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -20px;
    margin-left: -20px;
    border: solid 3px;
    border-color: #555 #fff;
    @include radius(1000px);
    @if $experimental {
      -webkit-animation-name: rotate;
      -webkit-animation-duration: 1.5s;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-timing-function: linear;
      -moz-animation-name: rotate;
      -moz-animation-duration: 1.5s;
      -moz-animation-iteration-count: infinite;
      -moz-animation-timing-function: linear;
      -o-animation-name: rotate;
      -o-animation-duration: 1.5s;
      -o-animation-iteration-count: infinite;
      -o-animation-timing-function: linear;
    }
    animation-name: rotate;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }

  .orbit-container {
    overflow: hidden;
    width: 100%;
    position: relative;
    background: $orbit-container-bg;

    .orbit-slides-container {
      list-style: none;
      margin: 0;
      padding: 0;
      position: relative;

      img { display: block; }

      &>* {
        position: relative;
        float: $default-float;
        height: auto;

        .orbit-caption {
          position: absolute;
          bottom: 0;
          background-color: $orbit-caption-bg-old;
          background-color: $orbit-caption-bg;
          color: $orbit-caption-font-color;
          width: 100%;
          padding: 10px 14px;
          font-size: emCalc(14px);
        }
      }
    }

    .orbit-slide-number {
      position: absolute;
      top: 10px;
      #{$default-float}: 10px;
      font-size: 12px;
      span { font-weight: 700; padding: $orbit-slide-number-padding;}
      color: $orbit-slide-number-font-color;
      background: $orbit-slide-number-bg;
    }

    .orbit-timer {
      position: absolute;
      top: 10px;
      #{$opposite-direction}: 10px;
      height: 6px;
      width: 100px;
      .orbit-progress {
        height: 100%;
        background-color: $orbit-timer-bg-old;
        background-color: $orbit-timer-bg;
        display: block;
        width: 0%;
      }

      & > span {
        display: none;
        position: absolute;
        top: 10px;
        #{$opposite-direction}: 0px;
        width: 11px;
        height: 14px;
        border: solid 4px #000;
        border-top: none;
        border-bottom: none;
      }

      &.paused {
        & > span {
          #{$opposite-direction}: -6px;
          top: 9px;
          width: 11px;
          height: 14px;
          border: inset 8px;
          border-right-style: solid;
          border-color: transparent transparent transparent #000;
        }
      }
    }

    &:hover .orbit-timer > span { display: block; }

    // Let's get those controls to be right in the center on each side
    .orbit-prev,
    .orbit-next {
      position: absolute;
      top: 50%;
      margin-top: -25px;
      background-color: $orbit-nav-bg-old;
      background-color: $orbit-nav-bg;
      width: 50px;
      height: 60px;
      line-height: 50px;
      color: white;
      text-indent: -9999px !important;

      & > span {
        position: absolute;
        top: 50%;
        margin-top: -16px;
        display: block;
        width: 0;
        height: 0;
        border: inset 16px;
      }
    }
    .orbit-prev { #{$default-float}: 0;
      & > span {
        border-#{$opposite-direction}-style: solid;
        border-color: transparent;
        border-#{$opposite-direction}-color: #fff;
      }
      &:hover > span {
        border-#{$opposite-direction}-color: #ccc;
      }
    }
    .orbit-next { #{$opposite-direction}: 0;
      & > span {
        border-color: transparent;
        border-#{$default-float}-style: solid;
        border-#{$default-float}-color: #fff;
        #{$default-float}: 50%;
        margin-#{$default-float}: -8px;
      }
      &:hover > span {
        border-#{$default-float}-color: #ccc;
      }
    }
  }

  .orbit-bullets {
    margin: 0 auto 30px auto;
    overflow: hidden;
    position: relative;
    top: 10px;

    li {
      display: block;
      width: 18px;
      height: 18px;
      background: $orbit-bullet-nav-color;
      float: $default-float;
      margin-#{$opposite-direction}: 6px;
      border: solid 2px $orbit-bullet-nav-color-active;
      @include radius(1000px);

      &.active {
        background: $orbit-bullet-nav-color-active;
      }

      &:last-child { margin-#{$opposite-direction}: 0; }
    }
  }

  .touch {
    .orbit-container {
      .orbit-prev,
      .orbit-next { display: none; }
    }

    .orbit-bullets { display: none; }
  }


  @media #{$small} {

    .touch {
      .orbit-container {
        .orbit-prev,
        .orbit-next { display: inherit; }
      }

      .orbit-bullets { display: block; }
    }

  }

}