.ui-carousel {
  display: block;
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  overflow: visible;

  // Focus outline for keyboard navigation
  &:focus {
    outline: 0.125rem solid var(--isa-accent-primary, #354acb);
    outline-offset: 0.125rem;
  }

  &:focus:not(:focus-visible) {
    outline: none;
  }
}

.ui-carousel__container {
  display: flex;
  flex-wrap: nowrap;
  cursor: grab;
  user-select: none;
  touch-action: pan-y; // Allow vertical scrolling, prevent horizontal scroll
  width: max-content; // Container expands to fit all children

  transition: transform 0.3s linear;
  will-change: transform; // Optimize for hardware acceleration
  backface-visibility: hidden; // Prevent flickering
  -webkit-backface-visibility: hidden;

  &:active {
    cursor: grabbing;
  }
}

.ui-carousel__container--dragging {
  transition: none;
}

.ui-carousel__button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  transition: opacity 0.3s ease;

  // Left button positioning
  &--left {
    left: 0;
  }

  // Right button positioning
  &--right {
    right: 0;
  }
}

// Auto-hide arrows variant
.ui-carousel--auto-hide {
  .ui-carousel__button {
    opacity: 0;
    pointer-events: none;
  }

  &:hover .ui-carousel__button,
  &:focus-within .ui-carousel__button {
    opacity: 1;
    pointer-events: auto;
  }
}
