@charset "UTF-8";
@import "./common/var.css";

@component-namespace el {

  @b carousel {
    overflow-x: hidden;
    position: relative;

    @e container {
      position: relative;
      height: 300px;
    }

    @e arrow {
      border: none;
      outline: none;
      padding: 0;
      margin: 0;
      size: var(--carousel-arrow-size);
      cursor: pointer;
      transition: .3s;
      border-radius: 50%;
      background-color: var(--carousel-arrow-background);
      color: var(--color-white);
      position: absolute;
      top: 50%;
      z-index: 10;
      transform: translateY(-50%);
      text-align: center;
      font-size: var(--carousel-arrow-font-size);

      @modifier left {
        left: 16px;
      }

      @modifier right {
        right: 16px;
      }

      &:hover {
        background-color: var(--carousel-arrow-hover-background);
      }

      & i {
        cursor: pointer;
      }
    }

    @e indicators {
      position: absolute;
      list-style: none;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      margin: 0;
      padding: 0;
      z-index: calc(var(--index-normal) + 1);

      @modifier outside {
        bottom: calc(var(--carousel-indicator-height) + var(--carousel-indicator-padding-vertical) * 2);
        text-align: center;
        position: static;
        transform: none;
        .el-carousel__indicator:hover button {
          opacity: 0.64;
        }
        button {
          background-color: var(--carousel-indicator-out-color);
          opacity: 0.24;
        }
      }
      
      @modifier labels {
        left: 0;
        right: 0;
        transform: none;
        text-align: center;
        
        .el-carousel__button {
          size: auto auto;
          padding: 2px 18px;
          font-size: 12px;
        }

        .el-carousel__indicator {
          padding: 6px 4px;
        }
      }
    }

    @e indicator {
      display: inline-block;
      background-color: transparent;
      padding: var(--carousel-indicator-padding-vertical) var(--carousel-indicator-padding-horizontal);
      cursor: pointer;

      &:hover button {
        opacity: 0.72;
      }

      @when active {
        button {
          opacity: 1;
        }
      }
    }

    @e button {
      display: block;
      opacity: 0.48;
      size: var(--carousel-indicator-width) var(--carousel-indicator-height);
      background-color: var(--color-white);
      border: none;
      outline: none;
      padding: 0;
      margin: 0;
      cursor: pointer;
      transition: .3s;
    }
  }

  .carousel-arrow-left-enter,
  .carousel-arrow-left-leave-active {
    transform: translateY(-50%) translateX(-10px);
    opacity: 0;
  }

  .carousel-arrow-right-enter,
  .carousel-arrow-right-leave-active {
    transform: translateY(-50%) translateX(10px);
    opacity: 0;
  }
}