@mixin arrow-control {
  width: 10%;
  min-width: $Carousel-arrowControl-width;
  height: 100%;
  cursor: pointer;
  position: absolute;
  transition-duration: $Carousel-transitionDuration;
  svg {
    position: absolute;
    top: 50%;
    left: 50%;
    right: 50%;
    transform: translate(-50%, -50%);
    width: $Carousel-svg-width;
    height: $Carousel-svg-height;
  }
}

.#{$ns}Carousel {
  min-width: $Carousel-minWidth;
  height: $Carousel-height;
  position: relative;
  display: block;
  background: $Carousel-bg;

  &.#{$ns}Carousel--light {
    .#{$ns}Carousel-dot {
      background-color: $Carousel--light-control;
    }

    svg {
      fill: $Carousel--light-control;
    }

    .#{$ns}Carousel-item {
      .title,
      .description {
        color: $Carousel--light-control;
      }
    }
  }

  &.#{$ns}Carousel--dark {
    .#{$ns}Carousel-dot {
      background-color: $Carousel--dark-control;
    }

    svg {
      fill: $Carousel--dark-control;
    }

    .#{$ns}Carousel-item {
      .title,
      .description {
        color: $Carousel--dark-control;
      }
    }
  }

  &-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;

    .#{$ns}Carousel-item {
      width: 100%;
      height: 100%;
      position: absolute;
      transition: ease-out all $Carousel-transitionDuration;

      &.fade {
        opacity: 0;
      }

      &.fade.in {
        opacity: 1;
      }

      &.slide {
        transform: translateX(100%);
      }

      &.slide.in {
        transform: translateX(0);
      }

      &.slide.out {
        transform: translateX(-100%);
      }

      &.slideRight {
        transform: translateX(-100%);
      }

      &.slideRight.in {
        transform: translateX(0);
      }

      &.slideRight.out {
        transform: translateX(100%);
      }

      .title {
        position: absolute;
        bottom: $Carousel-imageTitle-bottom;
        text-align: center;
        width: 100%;
        opacity: 0.8;
      }

      .description {
        position: absolute;
        bottom: $Carousel-imageDescription-bottom;
        text-align: center;
        width: 100%;
        opacity: 0.8;
      }

      .image {
        width: 100%;
        height: 100%;
        background-size: cover;
      }
    }
  }

  &-dotsControl {
    position: absolute;
    bottom: 0px;
    width: 100%;
    z-index: 100;
    text-align: center;

    .#{$ns}Carousel-dot {
      display: inline-block;
      height: $Carousel-dot-width;
      width: $Carousel-dot-height;
      border-radius: $Carousel-dot-borderRadius;
      margin: $Carousel-dot-margin;
      transition-duration: $Carousel-transitionDuration;
      opacity: 0.3;

      &.is-active {
        opacity: 1;
      }
    }
  }

  &-arrowsControl {
    position: absolute;
    width: 100%;
    height: inherit;
    z-index: 100;
    text-align: center;

    .#{$ns}Carousel-leftArrow {
      @include arrow-control;
      left: 0;
    }

    .#{$ns}Carousel-rightArrow {
      @include arrow-control;
      right: 0;
    }
  }
}