@use "../../../00-theme/00-base/01-helpers" as *;
@use "../../../00-theme/00-base/00-config/00-variables" as *;

////////////////////////////////////////////////////////////////////////////////
// *
// * Sections with Carousel
// *
// * General styling for carousel layouts
// *
////////////////////////////////////////////////////////////////////////////////

// *
// =============================================================================

.layout__region--carousel--content-blocks {
  // spacing above the carousel region
  // this should only render if that top section contains items
  &.layout__content__row--top {
    margin-bottom: var(--gap-layout-vert-medium);
  }
}


// * Slick slider
// =============================================================================

.layout__content__row--carousel {
  position: relative;
  text-align: center;

  // ** reset some block options
  .block-layout-builder,
  .block-layout_builder {
    top: 0;
    left: 0;
    transform: none;
  }

  // ** items list
  .slick-list {
    width: calc(100% - 60px);
    height: auto !important; // Overwrite height added by script
    margin-left: rem(30);
    margin-right: rem(30);
  }

  // vertical alignment (default is already top & stretched
  .slick-track {
    display: flex;
  }

  .slick-slide {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    height: auto;
    margin: 0 rem(10);
  }

  &.layout__region--v-align-middle,
  &.layout__region--v-align-center {
    .slick-track {
      align-items: center;
    }

    .slick-slide {
      justify-content: center;
    }
  }

  &.layout__region--v-align-bottom {
    .slick-track {
      align-items: flex-end;
    }

    .slick-slide {
      justify-content: flex-end;
    }
  }

  // ** navigation
  .slick-arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    width: rem(30);
    font-size: 0;
    cursor: pointer;
    transition: all $duration $easing;

    &::before {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transition: all $duration $easing;
    }

    &.slick-prev,
    &.slick-next {
      @include icon((
        color: hsl(var(--clr-link)),
        size: 30,
      ));
    }

    &.slick-prev {
      left: 0;

      &::before {
        @include icon-char(angle-left);
      }
    }

    &.slick-next {
      right: 0;

      &::before {
        @include icon-char(angle-right);
      }
    }

    &:focus-visible,
    &:hover {
      &::before {
        color: hsl(var(--clr-link-hover));
      }
    }
  }
}
