.carousel {
  text-align: center;
  position: relative;
  opacity: 0;
  margin: 0 auto;
  transition: opacity 0.5s;

  .carousel-container-inner {
    margin: 0 auto;
    position: relative;
  }

  .carousel-viewport {
    overflow: hidden;
    white-space: nowrap;
    text-align: start;
  }

  .carousel-arrow-default {
    border: 3px solid !important;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.9);
    height: 32px;
    width: 32px;
    font-weight: 900;
    background: rgba(0, 0, 0, 0.15);
  }

  .carousel-arrow {
    position: absolute;
    z-index: 1;
    bottom: 23px;
    padding: 0;
    cursor: pointer;
    border: none;

    &:focus {
      outline: none;
    }

    &:before {
      font-size: 19px;
      display: block;
      margin-top: -2px;
    }

    &:disabled {
      cursor: not-allowed;
      opacity: 0.5;
    }
  }

  .carousel-left-arrow {
    left: 23px;
  }

  .carousel-right-arrow {
    right: 23px;
  }

  .carousel-left-arrow {
    &.carousel-arrow-default {
      &:before {
        content: '<';
        padding-right: 2px;
      }
    }
  }

  .carousel-right-arrow {
    &.carousel-arrow-default {
      &:before {
        content: '>';
        padding-left: 2px;
      }
    }
  }

  .carousel-top-arrow {
    top: 75px;
  }

  .carousel-bottom-arrow {
    bottom: 75px;
  }

  .carousel-top-arrow {
    &.carousel-arrow-default {
      &:before {
        content: '\1431';
        padding-bottom: 2px;
      }
    }
  }

  .carousel-bottom-arrow {
    &.carousel-arrow-default {
      &:before {
        content: '\142F';
        padding-top: 2px;
      }
    }
  }

  .carousel-track {
    list-style: none;
    padding: 0;
    margin: 0;
    touch-action: pan-y pinch-zoom;

    .carousel-slide {
      display: inline-block;
      opacity: 0.7;
      transition: opacity 0.5s ease-in-out;

      & > * {
        display: block;
        white-space: normal;
      }
      &.carousel-slide-loading {
        background: rgba(204, 204, 204, 0.7);
      }
      &.carousel-slide-fade {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        opacity: 0;
      }
      &.carousel-slide-selected {
        opacity: 1;
        z-index: 1;
      }
    }
  }

  &.loaded {
    opacity: 1;
  }

  .carousel-dots {
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -30px;
    text-align: center;

    li {
      display: inline-block;
    }

    button {
      border: 0;
      background: transparent;
      font-size: 1.1em;
      cursor: pointer;
      color: #CCC;
      padding-left: 6px;
      padding-right: 6px;

      &.selected {
        color: black;
      }

      &:focus {
        outline: none;
      }
    }
  }
}

@import "./rtl.less";