/* Scroller Scope */

.scroller {
    --scroll-height: 8px;
    --vertical-margin: 10px;

    --transition-duration: 0.1s;

    --adornment-color: rgba(0, 0, 0, 0.5);
    --control-color: rgba(0, 0, 0, 0.5);
}

.scroller,
.scroller * {
    -webkit-user-select: none;
    user-select: none;
    box-sizing: border-box;
}

.scroller {
    touch-action: manipulation;
    position: relative;
    overflow: hidden;
}

/* Component Container */

.scroller-container {
    cursor: move;
    cursor: grab;
    position: relative;
    min-inline-size: 100%;
}

.scroller-container::before,
.scroller-container::after {
    content: '';

    position: absolute;
    z-index: 1;
    inset-block: 0 0;

    inline-size: 1px;
    block-size: auto;

    opacity: 0;
    background: var(--adornment-color);

    transition: opacity var(--transition-duration);
}

.scroller-container::before {
    inset-inline-start: 0;
}

.scroller-container::after {
    inset-inline-end: 0;
}

.has-left-border .scroller-container::before,
.has-right-border .scroller-container::after {
    opacity: 1;
}

.is-not-scrollable .scroller-container {
    cursor: unset;
}

.is-not-scrollable .scroller-container::before,
.is-not-scrollable .scroller-container::after {
    display: none;
}

/* Content Container */

.scroller-content,
.scroller-content > li {
    list-style: none;
}

.scroller-content {
    --position: 0;

    transform: translateX(var(--position));

    display: inline-flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;

    min-inline-size: 100%;
    margin: 0;
    padding: 0;
}

.has-start-align .scroller-content {
    justify-content: start;
}

.has-end-align .scroller-content {
    justify-content: end;
}

/* Scrollbar */

.scroller-scrollbar {
    cursor: pointer;
    position: relative;
    block-size: var(--scroll-height);
    margin: var(--vertical-margin) 0;
}

.scroller-handle {
    --position: 0;
    --shrink-factor: 1;
    --shrink-origin: center;

    cursor: move;

    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    transform-origin: var(--shrink-origin);
    transform: translateX(var(--position)) scaleX(var(--shrink-factor));

    min-inline-size: 20px;
    block-size: 100%;

    opacity: 0.5;
    background-color: var(--control-color);
    border-radius: 0.2rem;

    transition: opacity var(--transition-duration);
}

.scroller-handle:hover,
.scroller-handle:active {
    opacity: 1;
}

.no-scrollbar .scroller-scrollbar {
    display: none;
}

/* Navigation */

.scroller-navigation {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin: var(--vertical-margin) 0;
}

.scroller-button {
    cursor: pointer;

    margin: 0;
    padding: 0;

    font-size: 0.8em;
    color: inherit;
    white-space: nowrap !important;

    -webkit-appearance: none;
    appearance: none;
    opacity: 0.5;
    background-color: transparent;
    border: 1px solid var(--border-color);

    transition: opacity var(--transition-duration);
}

.scroller-button:focus,
.scroller-button:hover {
    opacity: 1;
}

.scroller-navigation:empty,
.no-navigation .scroller-navigation {
    display: none;
}

/* Dynamic State Modifiers */

.is-dragging-content,
.is-dragging-content * {
    cursor: grabbing !important;
}

.is-dragging-handle,
.is-dragging-handle * {
    cursor: move !important;
}