/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */

@use "@splidejs/splide/css";

.splide:not(.is-overflow) .splide__pagination{
  display: flex;
}
.wp-block-orphic-ui-carousel {
  margin: 2rem 0;

  // Cache les flèches si l'option est désactivée
  &.hide-arrows {
    .splide__arrows {
      display: none;
    }
  }

   // Centre les slides quand il n'y a pas d'overflow
   .splide:not(.is-overflow) {
    .splide__list {
      justify-content: center;
      margin: 0 auto;
    }

    .splide__slide:last-child {
      margin: 0 !important;
    }
  }

  // Style de pagination simple
  .splide__pagination {
    bottom: -2rem;
    padding: 1rem 0;

    &__page {
      width: 10px;
      height: 10px;
      background: #d1d1d1;
      border: none;
      border-radius: 50%;
      margin: 0 6px;
      transition: all 0.2s ease;
      opacity: 1;

      &.is-active {
        transform: none;
        background: #333;
      }

      &:hover {
        opacity: 1;
        background: #999;
      }
    }
  }

  .splide__track {
    padding: 10px 0;
  }

  .splide__list {
    align-items: stretch;
    height: auto;
  }

  .splide__slide {
    height: auto !important;
    display: flex !important;
  }

  // Nouveau style pour les flèches
  .splide__arrows {
    .splide__arrow {
      width: 50px;
      height: 50px;
      background: rgba(255, 255, 255, 0.8);
      border: none;
      border-radius: 50%;
      opacity: 0.6;
      transition: all 0.3s ease;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

      &:hover {
        opacity: 1;
        background: rgba(255, 255, 255, 0.95);
      }

      &:focus {
        outline: none;
      }

      svg {
        fill: #333;
        width: 1.4em;
        height: 1.4em;
        transition: fill 0.3s ease;
      }

      &--prev {
        left: -1.5em;
      }

      &--next {
        right: -1.5em;
      }

      @media (max-width: 768px) {
        width: 40px;
        height: 40px;

        &--prev {
          left: -0.5em;
        }

        &--next {
          right: -0.5em;
        }
      }
    }
  }
}

// Styles pour les slides
.wp-block-orphic-ui-carousel-slide {
  .orphic-ui-carousel-slide-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
}

