.muy-carousel {
  @apply relative;

  padding: 60px 0;

  .buttons-wrapper {
    @apply absolute
      flex
      items-center
      w-full
      z-50;

    height: 50px;

    @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: 8px;
      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;
      }
    }

    @media screen and (min-width: 769px) {
      &.top-left {
        @apply left-0
          justify-start;

        top: 0;
      }

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

        top: 0;
      }

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

        bottom: 0;
      }

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

        bottom: 0;
      }

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

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

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

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

        bottom: 0;
      }

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

        bottom: 0;
      }

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

  .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;
        }
      }
    }
  }

  & > .swiper {
    & > .swiper-wrapper {
      & > .block-editor-inner-blocks {
        & > .block-editor-block-list__layout {
          @apply grid grid-cols-3;
        }
      }
    }
  }
}

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