@layer ui-reset, ui;

/* carousel */
@layer ui {
  .carousel {
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-marker-group: after;
    anchor-name: --carousel;
    anchor-scope: --carousel;
    margin: 0;
    gap: var(--ui-spacing-2);
    border-radius: var(--ui-rounded-5);
    scrollbar-width: none;
    margin-block-end: 2.5rem;
    padding: 0;
    list-style: none;
    display: flex;
    position: relative;
    overflow-x: auto;

    &::-webkit-scrollbar {
      display: none;
    }

    & > li {
      flex: 1 0 calc((100% - (var(--visible, 1) - 1) * var(--ui-spacing-2)) / var(--visible, 1));
      scroll-snap-align: center;
      scroll-snap-stop: always;
      border-radius: inherit;
      list-style: none;
      overflow: clip;
    }

    &::scroll-button(*) {
      position-anchor: --carousel;
      top: anchor(center);
      background-color: var(--ui-neutral-0);
      cursor: pointer;
      filter: drop-shadow(0 1px 3px oklch(0% 0 0 / .5));
      width: 1.5rem;
      height: 1.5rem;
      transition: opacity var(--ease-glide-2);
      border: none;
      display: block;
      position: absolute;
      translate: 0 -50%;
      mask-position: center;
      mask-size: contain;
      mask-repeat: no-repeat;

      @media (hover: hover) {
        &:hover {
          opacity: .75;
        }
      }

      &:disabled {
        opacity: 0;
        pointer-events: none;
      }
    }

    &::scroll-button(left) {
      content: "" / "Previous slide";
      left: calc(anchor(left) + var(--ui-spacing-3));
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6l6 6' /%3E%3C/svg%3E");
    }

    &::scroll-button(right) {
      content: "" / "Next slide";
      left: calc(anchor(right) - var(--ui-spacing-3) - 1.5rem);
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6l-6 6' /%3E%3C/svg%3E");
    }

    &::scroll-marker-group {
      position-anchor: --carousel;
      top: calc(anchor(bottom) + var(--ui-spacing-3));
      left: anchor(center);
      gap: var(--ui-spacing-2);
      display: flex;
      position: absolute;
      translate: -50%;
    }

    & > li::scroll-marker {
      content: attr(data-accname);
      white-space: nowrap;
      text-indent: 100%;
      border-radius: var(--ui-rounded-full);
      background-color: var(--ui-neutral-200);
      width: .5rem;
      height: .5rem;
      transition: background-color var(--ease-glide-2),
      scale var(--ease-glide-2);
      display: block;
      overflow: hidden;
    }

    & li::scroll-marker:target-current {
      background-color: var(--ui-neutral-950);
      scale: 1.3;
    }
  }
}