responsive-carousel.scss

@import 'topcoder-includes';
@import '../partials/combined';

.tc-carousel {

  ul {
    display: block;
    height: 148px;
    margin: 0 auto;
    @media only screen and (max-width: 767px) {
      display: none;
    }
    &[slide-count="1"] {
      width: 170px;
    }
    &[slide-count="2"] {
      width: 340px;
    }
    &[slide-count="3"] {
      width: 510px;
    }
    &[slide-count="4"] {
      width: 680px;
    }
    &[slide-count="5"] {
      width: 850px;
    }
    &[slide-count="6"] {
      width: 1020px;
    }
    &[slide-count="7"] {
      width: 1190px;
    }

    li {
      div:last-child {
        margin-right: 0;
      }
    }
  }

  .rn-carousel-controls {
    position: relative;
    @media only screen and (max-width: 767px) {
      display: none;
    }

    .rn-carousel-control {
      height: 148px;
      width: 80px;
      line-height: 148px;
      top: -148px;
      background-color: $gray-lightest;
      color: $accent-gray;
      text-align: center;
    }

    .rn-carousel-control-prev {
      left: 0;
    }

    .rn-carousel-control-next {
      right: 0;
    }

  }

  .slide {
    display: inline-block;
  }
}