@import './../../../view/var.scss';

.carousel-content {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .carousel-inner {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    transition: left 0.5s;

    .carousel-item {
      float: left;
      height: 100%;
    }
  }

  .carousel-img {
    width: 100%;
    height: 100%;
    padding: 5px;
  }

  .carousel-indicators {
    position: absolute;
    bottom: 10px;
    display: flex;
    height: 60px;
    transition: left 0.5s;

    .carousel-left-bar {
      width: 15px;
      margin-right: 10px;
      line-height: 53px;
      text-align: center;
      cursor: pointer;
      background: $carouselbar-color;
      border-radius: 4px 0 0 4px;
    }

    .carousel-right-bar {
      width: 15px;
      line-height: 53px;
      text-align: center;
      cursor: pointer;
      background: $carouselbar-color;
      border-radius: 0 4px 4px 0;
    }


    .carousel-center-bar {
      position: relative;
      height: 100%;
      overflow: hidden;

      ul {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;

        .carousel-bar-item {
          float: left;
          height: 100%;
          margin-right: 10px;
          cursor: pointer;

          &.active {
            border: 1px solid $carouselbar-active-color;
          }
        }
      }
    }
  }
}
