/** Shopify CDN: Minification failed

Line 56:5 Cannot use type selector "--inside" directly after nesting selector "&"
Line 61:5 Cannot use type selector "--on-hover" directly after nesting selector "&"

**/
.prev-next-button {
  transition: opacity .15s ease-in-out, transform .15s ease-in-out, visibility .15s ease-in-out;

    &[disabled] {
      opacity: 0;
      visibility: hidden;
    }

    @media screen and (pointer: fine) {
      &[is="carousel-prev-button"] {
        &:hover {
          :is(svg) {
            animation-direction: reverse;
          }
        }
      }
    }
  }

.floating-controls-container {
  @media not screen and (pointer: fine) {
    > .prev-next-button {
       display: none;
    }
  }

  @media screen and (pointer: fine) {
    display: block;
    position: relative;

    > .prev-next-button {
      display: none;
    }

    > .is-scrollable ~ .prev-next-button {
      z-index: 1;
      display: grid;
      position: absolute;
      inset-block-start: calc(50% - 1.5625rem);
    }

    > .prev-next-button--prev {
      inset-inline-start: var(--floating-controls-inset-inline, 0);
    }

    > .prev-next-button--next {
      inset-inline-end: var(--floating-controls-inset-inline, 0);
    }

    &--inside {
      --floating-controls-inset-inline: 1.5rem;
      padding-inline: 0;
    }

    &--on-hover {
      > .prev-next-button {
        opacity: 0;
        transform: translateY(-10px);
      }

      &:hover {
        > .prev-next-button:not([disabled]) {
          opacity: 1;
          transform: translateY(0);
         }
      }
    }
  }
}