.header-media {
  flex-direction: column;

  .wp-block-cover__inner-container {
    padding: 1rem;

    .wp-block-column p {
      max-width: 640px;
      margin-inline: auto;
    }
  }

  .slider-sub-heading {
    font-weight: 600;
    letter-spacing: 10.67px;
    margin: 0;
    text-transform: uppercase;
    text-shadow: 4px 4px 0 var(--wp--preset--color--dark-color);
  }

  .slider-heading {
    color: var(--wp--preset--color--hover-color);
    margin-bottom: 0;
    text-transform: uppercase;
    text-shadow: 5px 5px 0 var(--wp--preset--color--dark-color);
  }

  p {
    color: var(--wp--preset--color--body-text);
    margin: 0;
  }
}

.slider .wp-block-cover {
  height: auto;
  min-height: auto !important;
  padding-top: 0;
}

.slider.wp-block-group {
  padding: 0;
}

.fse-slider-wrapper,
.fse-pro-slider {
  margin: 0;
  margin-block-start: 0;
}

// CSS FOR SLIDER BUTTONS

.fse-slider-wrapper .swiper-button {
  width: auto;
  font-weight: 400;
}

.slider .fse-pro-slider .swiper-button-next,
.slider .fse-pro-slider .swiper-button-prev,
.slider .fse-slider-wrapper .swiper-button-next,
.slider .fse-slider-wrapper .swiper-button-prev {
  margin: 0;
  transform: none;
  top: auto;
}

.navigation-wrap {
  bottom: 0;
  @include flex;
  gap: 30px;
  z-index: 1;
}

.slider .navigation-wrap {
  bottom: 20px;
  position: relative;
}

.swiper-button-prev:after,
.swiper-button-next:after {
  left: 0;
  position: absolute;
}

.swiper-button-next:after {
  left: auto;
  right: 0;
}

.slider {
  .fse-pro-slider,
  .fse-slider-wrapper {
    .swiper-pagination-bullets {
      transform: none;
      width: auto;
      z-index: 1;
    }

    .swiper-button-next,
    .swiper-button-prev {
      background: transparent;
      left: auto;
      right: 0;
      padding: 0;
      position: relative;
      width: 50px;

      &:is(:hover, :focus) {
        background-color: transparent;
      }

      &:before {
        background: var(--wp--preset--color--color-light);
        right: 0;
        width: 50px;
      }

      &:after {
        left: 0;
        color: var(--wp--preset--color--color-light);
      }
    }

    .swiper-button-next {
      &:before {
        left: 0;
        right: auto;
      }

      &:after {
        left: auto;
        right: 0;
      }
    }
  }
}

.swiper-horizontal > .swiper-pagination-bullets {
  bottom: 40px;
}

.fse-pro-slider,
.fse-slider-wrapper {
  position: relative;

  .swiper-pagination-bullets {
    bottom: 0;
    position: relative;
    z-index: 1;
  }

  .swiper-pagination-bullet {
    height: 12px;
    width: 12px;
    background-color: var(--wp--preset--color--color-light);
    opacity: 0.3;

    &.swiper-pagination-bullet-active {
      background-color: var(--wp--preset--color--hover-color);
      opacity: 1;
    }
  }

  .swiper-button-next,
  .swiper-button-prev {
    background-color: var(--wp--preset--color--grey-bg-opacity);
    box-sizing: content-box;
    padding: 10px;
    height: 35px;
    width: 35px;
    z-index: 1;

    &:is(:hover, :focus) {
      background-color: var(--wp--preset--color--hover-color);

      &:before,
      &:after {
        opacity: 1;
      }
    }

    &:before {
      content: "";
      height: 2px;
      width: 30px;
      background: var(--wp--preset--color--dark-color);
      @include transition(all 0.5s ease);
      position: absolute;
      opacity: 0.4;
      right: 15px;
    }

    &:after {
      color: var(--wp--preset--color--dark-color);
      opacity: 0.4;
      left: 9px;
    }
  }

  .swiper-button-next {
    &:after {
      left: auto;
      right: 15px;
    }
  }
}

.fse-slider-wrapper .swiper-button-next {
  right: 0;
}

.fse-slider-wrapper .swiper-button-prev {
  left: 0;
}

.testimonial-section {
  .swiper-horizontal .navigation-wrap,
  .horizontal + .swiper-pagination + .navigation-wrap {
    @include transform(none);

    .swiper-button-next {
      right: 0;
      top: 50%;
      @include transform(translateY(-50%));
      position: absolute;
    }

    .swiper-button-prev {
      top: 50%;
      @include transform(translateY(-50%));
      position: absolute;
      left: 0;
      right: auto;
    }
  }
}

.slider .swiper-horizontal.navigation-enabled .navigation-wrap,
.slider .horizontal + .no-pagination + .navigation-wrap {
  justify-content: flex-end;
  left: auto;
  right: 15%;
  @include transform(none);
}

.slider {
  overflow: hidden;

  .swiper-horizontal .navigation-wrap,
  .horizontal + .swiper-pagination + .navigation-wrap {
    left: 50%;
    transform: translateX(-50%);
    justify-content: center;
  }

  .fse-slider-wrapper:is(
      .horizontal-inside-slider-bottom-left,
      .horizontal-inside-slider-bottom-left,
      .horizontal-outside-slider-bottom-left,
      .horizontal-outside-slider-bottom-left,
      .vertical-left-center,
      [class*="vertical-left-"]
    )
    .navigation-wrap,
  .swiper-wrapper:is(
      .horizontal-inside-slider-bottom-left,
      .horizontal-inside-slider-bottom-left,
      .horizontal-outside-slider-bottom-left,
      .horizontal-outside-slider-bottom-left,
      .vertical-left-center,
      [class*="vertical-left-"]
    )
    + .swiper-pagination
    + .navigation-wrap {
    left: 5%;
    justify-content: flex-start;
    @include transform(none);
  }

  .fse-slider-wrapper:is(
      .horizontal-inside-slider-bottom-right,
      .horizontal-outside-slider-bottom-right,
      [class*="vertical-right-"]
    )
    .navigation-wrap,
  .swiper-wrapper:is(
      .horizontal-inside-slider-bottom-right,
      .horizontal-outside-slider-bottom-right,
      [class*="vertical-right-"]
    )
    + .swiper-pagination
    + .navigation-wrap {
    right: 8%;
    justify-content: flex-end;
    @include transform(none);
    left: auto;
  }

  [class*="vertical-"] .navigation-wrap,
  [class*="vertical-"] + .swiper-pagination + .navigation-wrap {
    flex-direction: column;

    .swiper-button-prev,
    .swiper-button-next {
      @include transform(rotate(90deg));
    }
  }

  .fse-slider-wrapper:is(.vertical-left-center, .vertical-right-center)
    .navigation-wrap,
  .swiper-wrapper:is(.vertical-left-center, .vertical-right-center)
    + .swiper-pagination
    + .navigation-wrap {
    top: 50%;
    @include transform(translateY(-50%));
    bottom: auto;
  }

  .fse-slider-wrapper:is(.vertical-left-top, .vertical-right-top)
    .navigation-wrap,
  .swiper-wrapper:is(.vertical-left-top, .vertical-right-top)
    + .swiper-pagination
    + .navigation-wrap {
    top: 8%;
    @include transform(none);
    bottom: auto;
  }

  .swiper-wrapper:is(.vertical-left-bottom, .vertical-right-bottom)
    + .swiper-pagination
    + .navigation-wrap,
  .fse-slider-wrapper:is(.vertical-left-bottom, .vertical-right-bottom)
    + .swiper-pagination
    + .navigation-wrap {
    transform: none;
    top: auto;
    bottom: 40px;
  }
}

.slider-content .wp-block-heading {
  @include transform(translateY(-50px));
  opacity: 0;
}

.slider-content p,
.slider-content .wp-block-buttons {
  @include transform(translateY(50px));
  transition-delay: 0.2s;
  opacity: 0;
}

.slider-content p,
.slider-content .wp-block-buttons,
.wp-block-heading {
  @include transition(0.5s ease-in-out);
}

.slider-content {
  .swiper-slide-active {
    .wp-block-cover__image-background {
      position: relative;
    }

    .slider-sub-heading,
    .slider-heading,
    p,
    .wp-block-buttons {
      opacity: 1;
      @include transform(translate(0));
    }
  }
}

.header-media {
  height: 100vh;
}

.admin-bar {
  .header-media {
    height: calc(100vh - 32px);
    min-height: calc(100vh - 32px);
  }
}

.slider .header-media,
.admin-bar .slider .header-media {
  height: auto;
  min-height: auto;
}

.block-editor-block-list__block.slider .navigation-wrap {
  bottom: 40px;
  position: absolute;
  right: 50px;
  width: 220px;
}
