:root {
    --orange-200: #fed7aa;
    --orange-300: #fdba74;
}

/* Container */
.rewrite-scroll-container {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: var(--rewrite-height, 644px);
    padding: var(--rewrite-padding, 0);
    gap: var(--rewrite-gap, 12px);
}

.rewrite-scroll-container.direction-horizontal {
    flex-direction: row;
}

/* List/Track */
.rewrite-scroll-list {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: var(--scroll-vertical-gap, 12px);
    margin: 0;
    padding: 0;
    list-style: none;

    /* Animation */
    animation-name: scroll-vertical;
    animation-duration: var(--scroll-vertical-duration, 24s);
    animation-timing-function: var(--scroll-timing-function, linear);
    animation-iteration-count: infinite;
}

.rewrite-scroll-container.direction-horizontal .rewrite-scroll-list {
    flex-direction: row;
    animation-name: scroll-horizontal;
}

/* Pause Control */
.rewrite-scroll-container.pause-on-hover:hover .rewrite-scroll-list,
.rewrite-scroll-container.pause-on-focus:focus-within .rewrite-scroll-list {
    animation-play-state: paused;
}

/* Items */
.rewrite-scroll-item {
    width: fit-content;
}

.rewrite-scroll-link {
    display: block;
    width: fit-content;
    text-decoration: none;
    outline: none;
}

.rewrite-scroll-label {
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;

    /* Typography defaults matching Tailwind .label-lg */
    font-size: 1.125rem;
    /* 18px */
    line-height: 1.75rem;
    /* 28px */
    font-weight: 500;

    /* Styling */
    background-color: var(--item-bg-normal, #fdba74);
    color: var(--item-text-normal, #000000);
    padding: 24px 32px;
    border-radius: 0.25rem;
    /* rounded */

    transition-property: background-color, color, transform;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover States */
.rewrite-scroll-link:hover .rewrite-scroll-label {
    background-color: var(--item-bg-hover, #fed7aa);
    color: var(--item-text-hover, #000000);
}

/* Focus States */
.rewrite-scroll-link:focus-visible .rewrite-scroll-label {
    background-color: var(--item-bg-focus, var(--item-bg-normal));
    color: var(--item-text-focus, var(--item-text-normal));

    /* Focus Ring */
    box-shadow: 0 0 0 var(--focus-ring-width, 2px) var(--focus-ring-color, #000000);
    outline-offset: var(--focus-ring-offset, 2px);
}

/* Hover Animation (Slide) */
.rewrite-slide-enabled .rewrite-scroll-link .rewrite-scroll-label {
    transition: transform var(--hover-anim-duration, 300ms) var(--hover-anim-easing, ease);
}

.rewrite-slide-enabled .rewrite-scroll-link:hover .rewrite-scroll-label,
.rewrite-slide-enabled .rewrite-scroll-link:focus-visible .rewrite-scroll-label {
    transform: translateX(var(--hover-slide-dist, 48px));
}

/* Accessibility */
.rewrite-scroll-link:focus {
    outline: none;
}

/* Responsive */
@media (max-width: 767px) {
    .rewrite-responsive-scroll {
        overflow-y: auto;
        height: auto !important;
    }

    .rewrite-responsive-scroll .rewrite-scroll-list {
        animation: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rewrite-scroll-list {
        animation: none !important;
    }

    .rewrite-scroll-label {
        transition: none !important;
    }
}

/* Keyframes */
@keyframes scroll-vertical {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(calc(-100% - var(--scroll-vertical-gap, 12px)));
    }
}

@keyframes scroll-horizontal {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-100% - var(--scroll-vertical-gap, 12px)));
    }
}