@use "../../style/variables" as *;

$carousel-prefix: #{$prefix}-carousel;

.#{$carousel-prefix} {
  position: relative;
  overflow: hidden;
  width: 100%;

  // ---- Viewport ----
  &__viewport {
    position: relative;
    overflow: hidden;
  }

  // ---- Track (scrollx) ----
  &__track {
    display: flex;
    position: relative;

    &_fade {
      position: relative;
    }
  }

  // ---- Slide ----
  &__slide {
    flex-shrink: 0;
    width: 100%;
    overflow: hidden;
  }

  &_fade &__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;

    &_active {
      position: relative;
      opacity: 1;
      pointer-events: auto;
    }
  }

  // ---- Arrows ----
  &__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ty-carousel-arrow-size);
    height: var(--ty-carousel-arrow-size);
    border: none;
    border-radius: 50%;
    background: var(--ty-carousel-arrow-bg);
    color: var(--ty-carousel-arrow-color);
    cursor: pointer;
    transition: background 0.3s;
    outline: none;

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

    &_prev {
      left: var(--ty-carousel-arrow-offset);
    }

    &_next {
      right: var(--ty-carousel-arrow-offset);
    }
  }

  // ---- Dots ----
  &__dots {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    z-index: 1;

    &_bottom {
      bottom: var(--ty-carousel-arrow-offset);
      left: 50%;
      transform: translateX(-50%);
      flex-direction: row;
    }

    &_top {
      top: var(--ty-carousel-arrow-offset);
      left: 50%;
      transform: translateX(-50%);
      flex-direction: row;
    }

    &_left {
      left: var(--ty-carousel-arrow-offset);
      top: 50%;
      transform: translateY(-50%);
      flex-direction: column;
    }

    &_right {
      right: var(--ty-carousel-arrow-offset);
      top: 50%;
      transform: translateY(-50%);
      flex-direction: column;
    }
  }

  &__dot {
    width: var(--ty-carousel-dot-width);
    height: var(--ty-carousel-dot-height);
    margin: 0 var(--ty-carousel-dot-gap);
    border-radius: var(--ty-carousel-dot-radius);
    background: var(--ty-carousel-dot-bg);
    cursor: pointer;
    transition: all 0.3s;

    button {
      display: block;
      width: 100%;
      height: 100%;
      padding: 0;
      border: none;
      background: transparent;
      cursor: pointer;
    }

    &:hover {
      background: var(--ty-carousel-dot-hover-bg);
    }

    &_active {
      width: var(--ty-carousel-dot-width-active);
      background: var(--ty-carousel-dot-active-bg);
    }
  }

  &_vertical-dots &__dot {
    width: var(--ty-carousel-dot-height);
    height: var(--ty-carousel-dot-width);
    margin: var(--ty-carousel-dot-gap) 0;

    &_active {
      width: var(--ty-carousel-dot-height);
      height: var(--ty-carousel-dot-height-active);
    }
  }
}