@import "../../common/helpers";

.acf-block-preview {
  .muy-slider {
    &.alignfull {
      margin-left: 0;
      margin-right: 0;
    }

    .slider {
      @apply flex
        flex-no-wrap
        overflow-y-auto;

      .slide {
        @apply font-serif
          font-bold
          flex-shrink-0;

        width: 25rem;
        font-family: "Noto Serif", serif;
        flex-basis: 33%;
        height: 20rem;
        min-height: 0;

        a {
          pointer-events: none;
        }

        .slider-content {
          @apply text-2xl;
        }
      }
    }
  }
}

.alignfull {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.muy-slider {
  @apply relative;

  .slick-arrow {
    @apply opacity-75
      w-8
      h-8;

    z-index: 10;
    transition: opacity 0.2s ease;

    &::before {
      content: "";

      @apply w-full h-full block bg-contain;
    }

    &:hover {
      @apply opacity-100;
    }
  }

  .next-arrow {
    @apply right-24;

    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("../images/arrow-right.svg");

    @screen lg {
      @apply inline-block;
    }
  }

  .before-arrow {
    @apply left-24;

    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("../images/arrow-left.svg");

    @screen lg {
      @apply inline-block;
    }
  }

  .slider {
    @apply m-0
      p-0;

    .slide {
      @apply relative
        block;

      display: block !important;

      figure {
        @apply m-0
          bg-black;

        @extend .fill;

        z-index: 0;

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

          &.desktop {
            @apply hidden;

            @screen md {
              @apply block;
            }
          }

          &.mobile {
            @apply block;

            @screen md {
              @apply hidden;
            }
          }
        }
      }

      .slider-content {
        @apply text-white;

        @extend .centered;

        width: 90%;
        max-width: 900px;
        z-index: 1;

        a {
          @apply border-0
            rounded-full
            py-3
            px-5
            inline-block
            justify-center
            items-center
            text-center
            font-normal
            text-sm;

          font-size: 1.125em;
          font-weight: 600;
          -webkit-transition: all 0.4s ease;
          -o-transition: all 0.4s ease;
          transition: all 0.4s ease;
          min-width: 100px;
        }
      }

      &.slide-has-text {
        figure {
          img {
            @apply opacity-50;
          }
        }
      }
    }

    .slick-dots {
      @apply items-center
        justify-center
        h-8
        pl-0;

      display: flex !important;
      top: unset;
      bottom: 40px;

      li {
        @apply m-0
          list-none;

        &::before {
          @apply hidden;
        }

        &.slick-active {
          button::before {
            @apply bg-white;
          }
        }

        button {
          @apply flex
            items-center
            justify-center;

          &::before {
            content: "";

            @apply opacity-100
              relative
              rounded-full
              border
              border-white
              w-2
              h-2;
          }
        }
      }
    }
  }

  .max_width_content_xs {
    max-width: 380px !important;
    margin: 0 auto !important;
  }

  .max_width_content_sm {
    max-width: 500px !important;
    margin: 0 auto !important;
  }

  .max_width_content_md {
    max-width: 650px !important;
    margin: 0 auto !important;
  }

  .max_width_content_lg {
    max-width: calc(768px - 2rem) !important;
    margin: 0 auto !important;
  }

  .max_width_content_xl {
    max-width: calc(1024px - 2rem) !important;
    margin: 0 auto !important;
  }

  .max_width_content_2xl {
    max-width: calc(1280px - 2rem) !important;
    margin: 0 auto !important;
  }

  .inner-slide-img {
    height: auto;
    width: 100%;
    object-fit: cover;
  }
}

button.image-arrow.slick-arrow.before-arrow.swiper-prev {
  position: absolute;
  top: 50%;
  left: 24px;
  transform: translateY(-50%);
}

button.image-arrow.slick-arrow.next-arrow.swiper-next {
  position: absolute;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
}
