// carousel uses "vue-agile"
// @link https://github.com/lukaszflorczak/vue-agile
// @license MIT
// scss-lint:disable SelectorFormat

// Hide during loading.
carousel,
[is="carousel"] { visibility: hidden; }

.agile__dots {
  @include position-bottom-center(5%);
  position: absolute;
}

.agile__dot {
  margin: 0 $space-1;

  > button {
    @include btn-base();
    position: relative;
    width: 25px;
    height: 25px;
    background-color: transparent;

    &::after {
      @include position-middle-center();
      position: absolute;
      width: 20px;
      height: 4px;
      background-color: $carousel-dot-color;
      content: '';
    }
  }
}

.agile__dot--current > button::after {
  background-color: $carousel-dot-active-color;
}

.agile__nav-button {
  @include btn-base();
  position: absolute;
  top: 0;
  width: 7.5%;
  height: 100%;
  font-size: $carousel-nav-button-font-size;
  color: $carousel-nav-button-color;
  background-color: transparent;

  &:hover { color: $carousel-nav-button-hover-color; }
}

.agile__nav-button--prev {
  left: 0;
}

.agile__nav-button--next {
  right: 0;
}