/*
|--------------------------------------------------------------------------
| Carousel
|--------------------------------------------------------------------------
| @namespace: car-Carousel
|
*/

.car-Carousel_Slides {
  position: relative;

  display: flex;

  cursor: grab;

  overflow: hidden;

  transition: opacity 0.5s ease;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.car-Carousel_Slides[data-keen-slider-v] {
  flex-wrap: wrap;
}
/* stylelint-disable-next-line selector-max-universal */
.car-Carousel_Slides[data-keen-slider-moves] * {
  pointer-events: none;
}

.car-Carousel_Slides-hidden {
  opacity: 0;
}

.car-Carousel_Slide {
  position: relative;

  min-height: 100%;
  width: 100%;

  overflow: hidden;
}

.car-Carousel_Scrollbar {
  position: relative;

  width: 100%;
  height: 1px;

  background-color: var(--Color_Brand-10);
  overflow: hidden;
}
.sec-Section-dark .car-Carousel_Scrollbar {
  background-color: var(--Color_White-10);
}

.car-Carousel_Scroller {
  position: absolute;
  top: 0;
  left: var(--movement);
  z-index: 1;

  width: var(--width);
  height: 1px;

  background-color: var(--Color_Brand);

  transition: left 100ms linear;
}
.sec-Section-dark .car-Carousel_Scroller {
  background-color: var(--Color_White);
}

/*
|--------------------------------------------------------------------------
| Progress lines
|--------------------------------------------------------------------------
|
*/
.car-Carousel_Lines {
  display: flex;
  width: 100%;
  margin-top: 20px;
}

.car-Carousel_Line {
  position: relative;

  flex-grow: 1;

  height: 2px;

  &::before {
    content: '';

    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;

    display: block;
    width: 100%;
    height: @width;

    background-color: var(--Color_Brand);
    opacity: 0.1;
  }

  &::after {
    content: '';

    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;

    display: block;
    width: 100%;
    height: @width;

    background-color: var(--Color_Brand);

    transform: scaleY(0);
    transform-origin: 0 0;
    transition: transform 0.5s ease;
  }

  &[aria-current='true'] {
    &::after {
      transform: scaleY(1);
    }
  }
}

/*
|--------------------------------------------------------------------------
| Progress dots
|--------------------------------------------------------------------------
|
*/

.car-Carousel_Dots {
  justify-content: center;

  display: flex;
  width: 100%;
}

.car-Carousel_Dot {
  align-items: center;
  justify-content: center;

  display: flex;
  width: 20px;
  height: @width;

  opacity: 0.3;

  transition: opacity 0.3s ease;

  &::before {
    content: '';

    display: block;
    width: 6px;
    height: @width;

    background-color: #fff;
    border-radius: 50%;
  }

  &[aria-current='true'],
  &:hover {
    opacity: 1;
  }
}