.content-carousel {
  overflow: hidden;
  position: relative;
  white-space: nowrap;
}

.content-carousel-arrows-container {
  // reset
  @include reset-normalize;

  // layout
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1;

  a {
    @include transition(opacity 0.2s ease-in-out);
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    
    &.disabled {
      cursor: not-allowed;
      opacity: 0.5;
    }
  }

  li {
    position: absolute;
    top: 0;
    bottom: 0;

    &.next {
      right: 45px;

      a {
        @include sprite($arrow-content-carousel-next);
      }
    }

    &.previous {
      left: 0;

      a {
        @include sprite($arrow-content-carousel-previous);
      }
    }

    a {
      display: block;
    }
  }

  span {
    @include hidden;
  }
}

.content-carousel-inner {
  // layout
  position: relative;
  left: 0;

  // styling
  @include transition(left 0.6s cubic-bezier(0.86, 0, 0.07, 1));
}

.content-carousel-item {
  display: inline-block;
  margin-right: -4px;
  vertical-align: top;
  white-space: normal;
}