.@{css-prefix}carousel {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  overflow: hidden;

  .bui-active-item {
    z-index: @carousel-item-active-z-index;
  }

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

  .bui-carousel-arrow-btn {
    z-index: @carousel-arrow-btn-z-index;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    padding: 8px;
    position: absolute;
    top: calc(50% - 16px);
    min-width: 24px;
    background: @carousel-arrow-btn-bg;

    .@{css-prefix}icon {
      display: block;
    }

    &:hover {
      background: @carousel-arrow-btn-hover-bg;
    }
  }

  .bui-carousel-arrow-right {
    right: 24px;
  }

  .bui-carousel-arrow-left {
    left: 24px;
  }

  &-dots {
    z-index: @carousel-item-active-z-index;
    position: absolute;
    bottom: 0;
    list-style-type: none;
    padding-inline-start: 0;
    line-height: 0;

    li {
      cursor: pointer;
      display: inline-block;
      list-style: none;
      padding: 24px 4px;

      .bui-carousel-btn {
        width: 40px;
        height: 3px;
        background: @carousel-dots-square-bg;
        transition: 0.3s;
        border-radius: 2px;
        cursor: pointer;
      }

      .bui-carousel-btn-dotted {
        height: 6px;
        width: 6px;
        border-radius: 3px;
      }

      &:hover {
        .bui-carousel-btn {
          background: @carousel-dots-square-hover-bg;
        }
      }

      &:last-child {
        .bui-carousel-btn {
          margin-right: 0;
        }
      }
    }

    .bui-carousel-is-active {
      .bui-carousel-btn {
        background: @gray-1;
      }
    }
  }

  &-item {
    transform: none;
    float: left;
    width: 100%;
    height: 100%;
    text-align: center;
    overflow: hidden;
    z-index: 0;
    will-change: transform;
  }

  .carousel-left {
    left: 36px;
  }

  .carousel-center {
    left: 50%;
    transform: translateX(-50%);
  }

  .carousel-right {
    right: 36px;
  }

  .carousel-outside-container {
    height: calc(100% - 50px);
  }

  .bui-carousel-outside-dots {
    position: relative;
    left: 0;
    transform: translateX(0);

    li {
      padding-bottom: 24px;

      .bui-carousel-btn {
        background: @carousel-dots-dotted-bg;
      }

      &:hover {
        .bui-carousel-btn {
          background: @carousel-dots-dotted-hover-bg;
        }
      }
    }

    .bui-carousel-is-active {
      .bui-carousel-btn {
        background: @gray-1;
      }
    }
  }

  .bui-carousel-item-card {
    position: relative;

    .bui-carousel-item-mask {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
    }
  }

  .bui-carousel-dots-none {
    display: none;
  }
}