@import '../../../../globals/variables';
@import '../../../../globals/mixins';

.carousel__container {
  display: flex;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.carousel__item {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  row-gap: 0.31rem;
  text-align: center;

  @include respond-to('small-mobile') {
    height: 10rem;
    min-width: 5.31rem;
  }

  @include respond-to('medium') {
    height: 19rem;
    min-width: 12.75rem;
  }

  @include respond-to('large') {
    height: 24.63rem;
    min-width: 17rem;
  }

  @include respond-to('extra-large') {
    height: 27.25rem;
    min-width: 18.75rem;
  }

  .labeldate p {
    font-size: 1.3rem;
    margin: 0;

    @include respond-to('small-mobile') {
      font-size: 0.8rem;
    }

    @include respond-to('medium') {
      font-size: 1.1rem;
    }
  }

  .thumbnail img {
    border: none;
    margin: 0;

    @include respond-to('small-mobile') {
      height: 6.69rem;
      width: 4.25rem;
    }

    @include respond-to('medium') {
      height: 15.63rem;
      width: 10.19rem;
    }

    @include respond-to('large') {
      height: 20.75rem;
      width: 13.63rem;
    }

    @include respond-to('extra-large') {
      height: 21.81rem;
      width: 15rem;
    }
  }

  .volume p {
    font-size: 1.4rem;
    margin: 0;

    @include respond-to('small-mobile') {
      font-size: 1rem;
    }

    @include respond-to('medium') {
      font-size: 1.2rem;
    }
  }
}

.carousel__list {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  overflow: hidden;
  padding: 0 1rem;

  @include respond-to('small-mobile') {
    height: 10rem;
    width: 17.5rem;
  }

  @include respond-to('medium') {
    height: 19rem;
    width: 38.44rem;
  }

  @include respond-to('large') {
    height: 24.63rem;
    width: 51.25rem;
  }

  @include respond-to('extra-large') {
    height: 27.25rem;
    width: 56.25rem;
  }
}

.carousel__next {
  background-color: transparent;
  border: none;
  cursor: pointer;
  height: 2.5rem;
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  z-index: 1;

  svg {
    height: 100%;
    width: 100%;
  }

  @include respond-to('small-mobile') {
    right: -0.8rem;
  }

  @include respond-to('small') {
    right: 5.63rem;
  }

  @include respond-to('medium') {
    right: 4.06rem;
  }
}

.carousel__prev {
  background-color: transparent;
  border: none;
  cursor: pointer;
  height: 2.5rem;
  left: 1rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  z-index: 1;

  svg {
    height: 100%;
    width: 100%;
  }

  @include respond-to('small-mobile') {
    left: -0.75rem;
  }

  @include respond-to('small') {
    left: 5.63rem;
  }

  @include respond-to('medium') {
    left: 4.06rem;
  }
}
