.featured-collections {
  display: block;
  position: relative;
  overflow: hidden;
}

.featured-collections__list {
  margin-block: 0;
  padding-inline-start: 0;

  &:not(.flickity-enabled.is-draggable) {
    display: flex;
  }

  & .flickity-prev-next-button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    width: 30px;
    height: 30px;
    background-color: var(--color-white);
    border-radius: 0;
    transform: translateY(calc(-50% - var(--space-xs)));

    & .flickity-button-icon {
      position: unset;
      width: 10px;
    }

    &:disabled {
      display: none;
    }

    &.previous {
      left: var(--space-md);

      @media screen and (min-width: 750px) {
        left: var(--space-lg);
      }
    }

    &.next {
      right: var(--space-md);

      @media screen and (min-width: 750px) {
        right: var(--space-lg);
      }
    }
  }
}

.featured-collections--item {
  width: var(--slide-width);
  list-style: none;
  box-sizing: initial;
  padding-right: var(--space-xs);

  &:first-child {
    padding-left: var(--space-md);
  }

  &:last-child {
    padding-right: var(--space-md);
  }

  @media screen and (min-width: 750px) {
    padding-right: var(--space-sm);

    &:first-child {
      padding-left: var(--space-lg);
    }

    &:last-child {
      padding-right: var(--space-lg);
    }
  }

  & .featured-collections__title {
    text-align: left;
  }

  & .featured-collections__link {
    display: block;
    height: 100%;
    transform: translateY(-100%);
  }
}

.featured-collections__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  cursor: pointer;

  & .card--product {
    display: flex;
  }

  & .media {
    display: flex;
    width: 100%;
  }
}

.featured-collections__link {
  position: absolute;
  inset: 0;
}

.featured-collections--icon-container {
  width: 3rem;
  height: 3rem;
  border-radius: 2px;
  border: 1px solid var(--color-grey-200);
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
  cursor: pointer;

  &.featured-collections--icon-previous {
    left: 2rem;

    @media screen and (min-width: 750px) {
      left: 4rem;
    }

    & svg {
      transform: rotate(180deg);
    }
  }

  &.featured-collections--icon-next {
    right: 2rem;

    @media screen and (min-width: 750px) {
      right: 4rem;
    }
  }

  &.swiper-button-disabled,
  &.swiper-button-lock {
    display: none;
  }
}