@import '../../../assets/scss/mixins.scss';

$titleFont: 36px;
$titleFontMobile: 16px;
$headerSpace: '110px';
$height: calc(100vh - 150px);
$chevronSize: 50px;
$padding: 12px;
$heightMobile: calc((100vw * 0.75) + (#{$titleFontMobile} * 3) + #{$headerSpace});

.carousel {
  position: relative;
  font-family: 'Quicksand', sans-serif;
  .icon {
    width: $chevronSize;
    height: $chevronSize;
    margin: 0.5em;
    background: var(--bg-hover-button);
    stroke: var(--color-hover-button);
    opacity: 0.5;
    padding: 4px;
    border-radius: 50px;
    box-sizing: border-box;
    cursor: pointer;
  }
  .icon.prev-chevron {
    transform: rotate(180deg);
  }

  .carousel-image {
    display: none;
    @include tablet() {
      padding-top: 140px;
      padding-bottom: 96px;
    }
    @include mobile() {
      padding-top: 110px;
      padding-bottom: 80px;
    }
  }
  .carousel-image.active {
    display: block;
  }
  .carousel-image .title {
    @include tablet() {
      font-size: var(--h3-sm);
      bottom: calc(var(--h3-sm) * 3);
    }
    @include mobile() {
      font-size: var(--h3-xs);
      bottom: calc(var(--h3-xs) * 2);
    }
    font-family: var(--subtitle-font), serif;
    font-weight: 400;
    position: absolute;
    color: var(--h3-color);
    text-align: center;
    width: 100%;
    bottom: calc(#{$titleFont} + #{$padding});
    width: 70vw;
    margin: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .carousel-control-prev,
  .carousel-control-next {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    @include mobile() {
      display: none;
    }
  }

  .carousel-indicators {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 15;
    display: flex;
    justify-content: center;
    padding-left: 0;
    margin-right: 15%;
    margin-left: 15%;
    list-style: none;
  }
  .carousel-indicators li {
    box-sizing: content-box;
    flex: 0 1 auto;
    height: 3px;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: -999px;
    cursor: pointer;
    background-clip: padding-box;
    background: var(--bg-indicator);
    &.active {
      background: var(--bg-indicator-active);
    }
  }

  @include pointer() {
    .carousel-image .title {
      visibility: hidden;
    }
    .carousel-indicators li {
      width: 30px;
    }
    .carousel-control-prev {
      left: 20px;
    }
    .carousel-control-next {
      right: 20px;
    }
    .carousel-image img {
      object-fit: cover;
      height: $height;
    }
  }

  @include touch() {
    .carousel-indicators li {
      width: 16px;
    }
    .carousel-control-prev {
      left: 0;
    }
    .carousel-control-next {
      right: 0;
    }
    .carousel-image img {
      object-fit: contain;
    }
  }
}