/* Файл хранит стили общего компонента собственных полос прокрутки AngelSystem. */

/* Рамка резервирует отдельные колонку и строку под полосы вне области содержимого. */
.angel-scroll-frame {
    --angel-scroll-vertical-gutter: 0px;
    --angel-scroll-horizontal-gutter: 0px;
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) var(--angel-scroll-vertical-gutter);
    grid-template-rows: minmax(0, 1fr) var(--angel-scroll-horizontal-gutter);
}

.angel-scroll-frame > .angel-scroll-viewport {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    min-height: 0;
    scrollbar-width: none;
}

/* Родные полосы скрываются только внутри областей, которыми управляет компонент. */
.angel-scroll-frame > .angel-scroll-viewport::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.angel-scroll-track {
    position: relative;
    overflow: hidden;
    background: var(--angel-scrollbar-track-color);
    cursor: default;
    touch-action: none;
    user-select: none;
}

.angel-scroll-track[hidden],
.angel-scroll-corner[hidden] {
    display: none;
}

.angel-scroll-track-vertical {
    grid-column: 2;
    grid-row: 1;
}

.angel-scroll-track-horizontal {
    grid-column: 1;
    grid-row: 2;
}

.angel-scroll-corner {
    grid-column: 2;
    grid-row: 2;
    background: var(--angel-scrollbar-track-color);
}

.angel-scroll-thumb {
    position: absolute;
    border-radius: 999px;
    background: var(--angel-scrollbar-thumb-color);
    transition: background-color 120ms ease;
}

.angel-scroll-track-vertical .angel-scroll-thumb {
    top: var(--angel-scrollbar-track-padding);
    right: var(--angel-scrollbar-track-padding);
    left: var(--angel-scrollbar-track-padding);
}

.angel-scroll-track-horizontal .angel-scroll-thumb {
    top: var(--angel-scrollbar-track-padding);
    bottom: var(--angel-scrollbar-track-padding);
    left: var(--angel-scrollbar-track-padding);
}

.angel-scroll-track:hover .angel-scroll-thumb {
    background: var(--angel-scrollbar-thumb-hover-color);
}

.angel-scroll-frame.is-dragging-vertical .angel-scroll-track-vertical .angel-scroll-thumb,
.angel-scroll-frame.is-dragging-horizontal .angel-scroll-track-horizontal .angel-scroll-thumb {
    background: var(--angel-scrollbar-thumb-active-color);
}

/* Фокус рисуется по внешнему краю рамки и не перекрывает содержимое. */
.angel-scroll-frame:has(> .angel-scroll-viewport[data-angel-scroll-focusable]:focus-visible) {
    outline: 1px solid var(--angel-scrollbar-focus-color);
    outline-offset: 1px;
}

.angel-scroll-viewport[data-angel-scroll-focusable]:focus-visible {
    outline: 0;
}

@media (prefers-reduced-motion: reduce) {
    .angel-scroll-thumb {
        transition: none;
    }
}