/* *****************************************************************************
*
*  Carousel
*
* ***************************************************************************** */

.carousel-simulator {
  .slick-dots {
    bottom: -3rem;
  }

  .slick-slide {
    @include media-scale(padding, 0 0.5rem, 0 1.5rem, 0 1.5rem);
    
    &:not(.slick-center) {
      a,button {
        pointer-events: none!important;
      }

      &:focus {
        cursor: grabbing;
      }

      @include hover(){
        cursor: grab;
      }
    }

    &.slick-center {
      .item-service-plan  {
        @include media-scale(transform, scale(1), scale(1.1), scale(1.2));
        border: 4px solid $primary;
        position: relative;
        z-index: 5;
        opacity: 1;
      }
    }

    .item-service-plan {
      @include media-scale(width, 75vw!important, 60vw!important, 23vw!important);
      @include transitions(transform, opacity, background-color);
      opacity: .5;
      transform: scale(1);
      box-shadow: 0 0 10px rgba(0,0,0,0.2);
      border: $border-width solid $border-color;
      background-color: $white;
    }
  }
}