/* GENERAL SECTION STYLES */
.slideshow {
  padding-inline: 0;

  &.slideshow--overlay {

    .slideshow__slide {
      position: relative;
      isolation: isolate;
      
      .slideshow__content-wrapper,
      .content-block__image {
        flex: 1 0 100%;
      }

      .slideshow__content-wrapper {
        z-index: 1;
      }

      .content-block__image {
        position: absolute;
        inset: 0;
        z-index: 0;
      }
    }
  }
}

.flex-justify--left {
  justify-content: flex-start;
  text-align: left;

  .justify-flex {
    margin-right: auto;
  }

  .button-layout__row {
    justify-content: flex-start;
  }

  .button-layout__column {
    align-items: flex-start;
  }
}

.flex-justify--center {
  justify-content: center;
  text-align: center;

  .justify-flex {
    margin-inline: auto;
  }

  .button-layout__row {
    justify-content: center;
  }

  .button-layout__column {
    align-items: center;
  }
}

.flex-justify--right {
  justify-content: flex-end;
  text-align: right;

  .justify-flex {
    margin-left: auto;
  }

  .button-layout__row {
    justify-content: flex-end;
  }

  .button-layout__column {
    align-items: flex-end;
  }
}

.flex-align--start {
  align-items: flex-start;
}

.flex-align--center {
  align-items: center;
}

.flex-align--end {
  align-items: flex-end;
}

/* HEADER BLOCK */
.slideshow .content-block__container {
    display: flex;
    padding-inline: 2rem;

  + .slideshow__content {
    margin-top: 4rem;
  }
}

.slideshow .content-block__header {
  padding-top: 1rem;
}

.slideshow__content--space {
  padding: 2rem;
}

/* SLIDER */
.slideshow__wrapper {
  display: flex;
  flex-direction: column;
  
  .content-block__buttons {
    margin-top: 0;
  }
}

.slideshow__slider {
  position: relative;
  isolation: isolate;
}

.slideshow__slides {
  z-index: -1;
}

.slideshow__slide .content-block__subheading + .content-block__heading {
  margin-top: 1.6rem;
}

.slideshow__slide .content-block__heading {
  margin-top: 0;
}

.slideshow__slide .content-block__heading + * {
  margin-top: 4rem;
}

/* SLIDES */
.slideshow__slide {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;

  &.slideshow__slide--reverse {
    flex-direction: column-reverse;
  }

  @media (min-width: 990px) {
    flex-direction: row;

    &.slideshow__slide--reverse {
      flex-direction: row;
    }
  }

  .slideshow__content-wrapper,
  .content-block__image {
    width: 100%;

    @media (min-width: 990px) {
      flex: 0 1 50%;
    }
  }

  .slideshow__content-wrapper {
    display: flex;
    padding-top: 4rem;
    padding-bottom: 2rem;
    padding-inline: 1.6rem;

    @media (min-width: 990px) {
      padding-top: 6rem;
      padding-bottom: 6rem;
      padding-inline: 6rem;
    }
  }

  .content-block__image {

    img,
    video {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }
}

/* CONTROLS */
.slideshow__navigation,
.slideshow__navigation-button {
  display: flex;
  justify-content: center;
  align-items: center;
}

.slideshow__navigation-button {
  position: relative;
}

.slideshow__controls {
  isolation: isolate;

  &.slideshow__controls--on {
    position:static;
    background-color: transparent;
    z-index: 1;

    .slideshow__controls--wrapper {
      
      .slideshow__pagination,
      .slideshow__navigation {
        position: absolute;
        width: 100%;
      }

      .slideshow__pagination {
        bottom: 0;
        padding: 1.6rem;
      }

      .slideshow__navigation {
        top: 50%;
        justify-content: space-between;
        transform: translateY(-50%);

        .slideshow__navigation-button--previous {
          transform: translateX(-25%);
        }

        .slideshow__navigation-button--next {
          transform: translateX(25%);
        }
      }

      &[data-pagination-style='tabs'] {

      }

      &[data-pagination-style="bullets"] {

      }

      &[data-pagination-style="numbers"] {

      }
    }
  }

  &.slideshow__controls--above,
  &.slideshow__controls--below {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 4rem;

    .slideshow__controls--wrapper {
      position: relative;
      display: flex;
      align-items: center;

      &[data-pagination-style='tabs'] {

        .slideshow__navigation {
          justify-content: space-between;
        }
      }

      &[data-pagination-style="bullets"] {

      }

      &[data-pagination-style="numbers"] {

      }

      .slideshow__pagination {
      }
    }
  }

  &.slideshow__controls--above {
    margin-bottom: 4rem;
  }

  &.has-navigation {
    min-height: 6.4rem;
  }

  &.has-pagination {

    .slideshow__navigation {

      .slideshow__navigation-button--previous {
        transform: translateX(calc(-100% - 2.4rem));
      }

      .slideshow__navigation-button--next {
        transform: translateX(calc(100% + 2.4rem));
      }
    }
  }
}

.slideshow__controls--wrapper {
  padding-bottom: 0.8rem;
  margin-inline: 2rem;
  overflow: scroll;

  &::-webkit-scrollbar {
    height: 0.3rem;
  }

  &::-webkit-scrollbar-track {
    background-color: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: rgb(var(--color-background-accent));
    transition: opacity 0.2s ease-in-out;
  }

  &[data-pagination-style='tabs'] {
    
    .slideshow__pagination-button {
      padding-inline: 2.4rem;
      padding-block: 1.2rem;
      border-radius: 0;
      opacity: 0.5;

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

  &[data-pagination-style='bullets'] {
    
    .slideshow__pagination-button {
      height: 1.6rem;
      width: 1.6rem;
      border-radius: 50%;

      &[aria-current='true'],
      &:hover {
        background-color: rgb(var(--color-button-tertiary-hover));
        border-color: rgb(var(--color-button-tertiary-hover));
      }
    }
  }

  &[data-pagination-style='numbers'] {

    .slideshow__pagination {
      gap: 1.6rem;
    }
    
    .slideshow__pagination-button {
      padding-top: 1.2rem;
      background-color: transparent;
      border: none;

      &[aria-current='true'],
      &:hover {
        border-top: 1px solid rgb(var(--color-border));
      }
    }
  }

  &.has-pagination {

    .slideshow__navigation {
      position: absolute;
      width: 100%;
    }
  }
}

.slideshow__pagination {

  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.slideshow__pagination-button {
  display: block;
  color: rgb(var(--color-button-tertiary-text));
  font-family: var(--font-button-family);
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
  background-color: rgb(var(--color-button-tertiary));
  border: 1px solid rgb(var(--color-border));
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.slideshow__navigation {
  gap: 0.8rem;
  z-index: -1;
}

.slideshow__navigation-button {
  color: rgb(var(--color-button-text));
  height: 6.4rem;
  width: 6.4rem;
  aspect-ratio: 1;
  background-color: rgb(var(--color-button));
  border: none;
  border-radius: 50%;
  padding: 0;
  margin: 0;
  cursor: pointer;

  &:hover {
    color: rgb(var(--color-button-text-hover));
  }

  &[aria-disabled='true'] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  svg {
    position: absolute;
  }
}

.slideshow__slide .slideshow__icon + * {
  margin-top: 1.6rem;

  @media only screen and (min-width: 990px) {
    margin-top: 6.4rem;
  }
}