.muy-carousel {
  @apply relative;

  .buttons-wrapper {
    @apply
      inline-block
      absolute
      h-auto
      items-center
      w-full
      z-50;

    gap: 42px;

    @screen md {
      @apply
        flex-row
        justify-between;

      gap: 0;
    }

    div {
      @apply
        flex;

      gap: 10px;
    }

    .swiper-button-prev,
    .swiper-button-next {
      @apply
        opacity-100
        relative;

      width: fit-content;
      height: fit-content;

      &.swiper-button-disabled {
        @apply
          opacity-50;
      }

      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      display: inline-block;
      transform: translateX(0);

      &::before {
        @apply
          hidden;
      }

      &::after {
        @apply
          relative
          flex
          w-full
          h-full
          justify-center
          items-center
          px-4;
      }
    }

    &.top-left {
      @apply
        left-0
        justify-start;

      top: -36px;
    }

    &.top-right {
      @apply
        right-0
        justify-end;

      top: -36px;
    }

    &.bottom-left {
      @apply
        left-0
        justify-start;

      bottom: -109px;
    }

    &.bottom-right {
      @apply
        right-0
        justify-end;

      bottom: -109px;
    }

    &.bottom-center {
      left: 50%;
      transform: translateX(-50%);
      bottom: -109px;
      justify-content: center;
    }

    @media screen and (max-width: 768px) {
      &.top-left-mobile {
        @apply
          top-0
          left-0;
      }

      &.top-right-mobile {
        @apply
          top-0
          right-0;
      }

      &.bottom-left-mobile {
        @apply
          left-0;

        bottom: -196px;
      }

      &.bottom-right-mobile {
        @apply
          right-0;

        bottom: -196px;
      }

      &.bottom-center-mobile {
        left: 50%;
        transform: translateX(-50%);
        bottom: -196px;
      }
    }
  }

  // .muy-height-full {
  //   height: 100vh;

  //   .muy-slide {
  //     height: 100vh;
  //   }
  // }

  // .muy-height-2xl {
  //   height: 950px;

  //   .muy-slide {
  //     height: 950px;
  //   }
  // }

  // .muy-height-xl {
  //   height: 750px;

  //   .muy-slide {
  //     height: 750px;
  //   }
  // }

  // .muy-height-lg {
  //   height: 550px;

  //   .muy-slide {
  //     height: 550px;
  //   }
  // }

  // .muy-height-xs {
  //   height: 400px;

  //   .muy-slide {
  //     height: 400px;
  //   }
  // }

  // .muy-height-sm {
  //   height: 230px;

  //   .muy-slide {
  //     height: 230px;
  //   }
  // }

  .slider {
    .slide {
      figure {
        @apply
          relative
          bg-transparent;

        top: inherit;
        bottom: inherit;
        left: inherit;
        right: inherit;
        transform: inherit;
        margin: auto;

        img {
          @apply
            w-auto
            h-auto;
        }
      }
    }
  }

  .wp-block-group {
    @apply
      h-full;

    .wp-block-group__inner-container {
      @apply
        h-full;

      figure {
        @apply
          h-full
          w-full;

        img {
          @apply
            h-full
            w-full
            object-cover;
        }
      }
    }
  }
}

.editor-styles-wrapper .muy-slide {
  height: 100%;
}
