:host {
  display: block;
  min-width: 0;
}

.carousel {
  position: relative;
  width: 100%;

  &__size-probe {
    position: absolute;
    height: 0;
    visibility: hidden;
    pointer-events: none;
    contain: strict;
  }

  &__frame {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    width: 100%;
    margin-inline: auto;

    &--with-controls {
      grid-template-columns: 3rem minmax(0, 1fr) 3rem;

      .carousel__viewport {
        grid-column: 2;
      }
    }
  }

  &__viewport {
    grid-row: 1;
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-behavior: smooth;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;

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

    &:focus-visible {
      outline: 2px solid var(--color-primary, currentColor);
      outline-offset: 2px;
    }

    &--circular {
      overflow: hidden;
      scroll-snap-type: none;
    }
  }

  &__linear-track,
  &__page {
    display: flex;
  }

  &__track {
    display: flex;
    width: 300%;
    transform: translateX(calc(-100% / 3));

    &--moving {
      transition: transform 300ms ease;
    }

    &--previous {
      transform: translateX(0);
    }

    &--next {
      transform: translateX(calc(-200% / 3));
    }
  }

  &__page {
    flex: 0 0 calc(100% / 3);
    min-width: 0;
  }

  &__item {
    flex: 0 0 auto;
    min-width: 0;
    scroll-snap-align: start;

    > * {
      width: 100%;
    }
  }

  &__control {
    grid-row: 1;
    justify-self: center;
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    color: var(--color-primary, #6376f3);
    cursor: pointer;
    background: transparent;
    border: 0;
    place-items: center;
    transition:
      color 150ms ease,
      transform 150ms ease;

    &:hover:not(:disabled) {
      color: color-mix(in srgb, var(--color-primary, #6376f3) 78%, #000);
      transform: scale(1.12);
    }

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

    &:focus-visible {
      outline: 2px solid var(--color-primary, currentColor);
      outline-offset: 2px;
    }

    &--previous {
      grid-column: 1;
    }

    &--next {
      grid-column: 3;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .carousel__viewport {
    scroll-behavior: auto;
  }

  .carousel__track--moving {
    transition-duration: 1ms;
  }
}