/*
|--------------------------------------------------------------------------
| Atomic: Common Scrollbar
|--------------------------------------------------------------------------
|
| Scaffolding: assets/css/template-parts/includes/common-scrollbar.css
*/

:root {
    --common-scrollbar-hover-bg: #f2f2f2;
    --common-scrollbar-segment-interaction-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    --common-scrollbar-btn-size: 40px;
    --common-scrollbar-btn-icon-size: 24px;

    /* Small visual separation between __thumb and __segment */
    --common-scrollbar-thumb-seam-size: 1px;
    --common-scrollbar-thumb-seam-color: transparent;
}

[data-common-scrollbar][data-variant="light"] {
    --common-scrollbar-accent: var(--color-primary, #0072CE);
    --common-scrollbar-thumb: var(--color-primary, #00569B);
    --common-scrollbar-track: #8b8b99;
    --common-scrollbar-thumb-shadow: none;
    --common-scrollbar-thumb-interaction-shadow: 0 2px 6px 0 rgba(0, 114, 206, 0.30);
    --common-scrollbar-segment-interaction-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    /* SliderHP light background is sector-pmi */
    --common-scrollbar-thumb-seam-color: var(--color-sector-pmi, #EDF7FF);
}

[data-common-scrollbar][data-variant="dark"] {
    --common-scrollbar-accent: #ffffff;
    --common-scrollbar-thumb: #ffffff;
    --common-scrollbar-track: var(--color-grey-3);
    /* keep default state clean; shadow only on hover/pressed */
    --common-scrollbar-thumb-shadow: none;
    --common-scrollbar-thumb-interaction-shadow: 0 2px 6px 0 rgba(255, 255, 255, 0.30);
    --common-scrollbar-segment-interaction-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    /* SliderHP dark background is secondary */
    --common-scrollbar-thumb-seam-color: var(--color-secondary, #002855);
}

.common-scrollbar {
    display: flex;
    align-items: center;
    gap: 20px;
}

.common-scrollbar__controls {
    display: flex;
    align-items: center;
    gap: 24px;
}

.common-scrollbar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--common-scrollbar-btn-size);
    block-size: var(--common-scrollbar-btn-size);
    padding: 0;
    border-radius: 4px;
    border: 1px solid var(--color-grey-2, #e6e6e6);
    background: #ffffff;
    color: var(--color-primary-dark, #00569B);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.common-scrollbar__btn:hover {
    background: var(--common-scrollbar-hover-bg);
}

.common-scrollbar__btn:focus-visible,
.common-scrollbar__btn:focus,
.common-scrollbar__btn:active {
    outline: none;
    border: 2px solid var(--common-scrollbar-accent);
    background: var(--common-scrollbar-hover-bg);
}

.common-scrollbar__btn:active {
    background: var(--common-scrollbar-hover-bg);
}

.common-scrollbar__btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--common-scrollbar-hover-bg);
    color: var(--color-grey-4, #666666);
}

.common-scrollbar__btn .icon {
    width: var(--common-scrollbar-btn-icon-size);
    height: var(--common-scrollbar-btn-icon-size);
}

.common-scrollbar__btn .icon.material-symbols-outlined {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--common-scrollbar-btn-icon-size);
    line-height: 1;
}

/* SliderHP: player buttons — 44px touch area, smaller visual button inside */
.common-scrollbar--sliderhp {
    --common-scrollbar-btn-size: 44px;
    --common-scrollbar-btn-icon-size: 24px;
}

.common-scrollbar--sliderhp .common-scrollbar__controls {
    gap: 0;
}

.common-scrollbar--sliderhp .common-scrollbar__btn {
    inline-size: 44px;
    block-size: 44px;
    position: relative;
    padding: 8px; /* touch padding — visual button lives inside content-box */
    border: none;
    background: transparent;
    border-radius: 0;
    color: var(--color-secondary, #002855);
}

/* Visual button frame (pseudo-element in the content-box area) */
.common-scrollbar--sliderhp .common-scrollbar__btn::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid var(--color-grey-2, #E6E6E6);
    border-radius: 2px;
    background: #ffffff;
    z-index: 0;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Keep icon above the pseudo-element */
.common-scrollbar--sliderhp .common-scrollbar__btn .icon {
    position: relative;
    z-index: 1;
}

/* Hover */
.common-scrollbar--sliderhp .common-scrollbar__btn:hover::before {
    background: var(--common-scrollbar-hover-bg, #f2f2f2);
}

/* Focus / active — border becomes accent color */
.common-scrollbar--sliderhp .common-scrollbar__btn:focus-visible,
.common-scrollbar--sliderhp .common-scrollbar__btn:focus,
.common-scrollbar--sliderhp .common-scrollbar__btn:active {
    border: none;
    outline: none;
    background: transparent;
}

.common-scrollbar--sliderhp .common-scrollbar__btn:focus-visible::before,
.common-scrollbar--sliderhp .common-scrollbar__btn:focus::before,
.common-scrollbar--sliderhp .common-scrollbar__btn:active::before {
    border: 1px solid var(--color-grey-2, #E6E6E6);
    background: var(--common-scrollbar-hover-bg, #f2f2f2);
    box-shadow: inset 0 0 0 2px var(--color-primary, #0072CE);
}

/* Disabled */
.common-scrollbar--sliderhp .common-scrollbar__btn:disabled {
    background: transparent;
}

.common-scrollbar--sliderhp .common-scrollbar__btn:disabled::before {
    background: var(--common-scrollbar-hover-bg, #f2f2f2);
}

/* ---- SliderHP scrollbar — QA Prisma ID 2/3/9 (scoped solo a --sliderhp) ---- */

/* ID 3: la traccia grigia è cliccabile (non trascinabile) → manina; il thumb resta grab */
.common-scrollbar--sliderhp .common-scrollbar__track {
    cursor: pointer;
}

/* ID 9: border-radius 1px di default (orizzontale), 2px all'hover della traccia.
   [data-common-scrollbar] aggiunto per superare la specificità delle regole orizzontali generiche. */
.common-scrollbar--sliderhp[data-common-scrollbar][data-orientation="horizontal"] .common-scrollbar__segment,
.common-scrollbar--sliderhp[data-common-scrollbar][data-orientation="horizontal"] .common-scrollbar__thumb {
    border-radius: 1px;
}

.common-scrollbar--sliderhp[data-common-scrollbar][data-orientation="horizontal"] .common-scrollbar__track:hover .common-scrollbar__segment,
.common-scrollbar--sliderhp[data-common-scrollbar][data-orientation="horizontal"] .common-scrollbar__track:hover .common-scrollbar__thumb {
    border-radius: 2px;
}

/* ID 2: all'hover, gap di 4px tra thumb e segmenti (il seam cresce da 1px a 4px) */
.common-scrollbar--sliderhp .common-scrollbar__track:hover {
    --common-scrollbar-thumb-seam-size: 4px;
}

/* Image Card carousel: barra progresso + prev/next (Figma 11698-51291) */
.common-scrollbar--imagecard {
    --common-scrollbar-btn-size: 40px;
    --common-scrollbar-btn-icon-size: 24px;
}

/* SliderText: buttons 44px, scoped only to this variant */
.common-scrollbar--slidertext {
    --common-scrollbar-btn-size: 44px;
    --common-scrollbar-btn-icon-size: 24px;
}

/* Progresso blu da sinistra; solo il segmento "after" resta grigio (traccia) */
.common-scrollbar--imagecard .common-scrollbar__segment--before {
    background: var(--common-scrollbar-thumb);
}
.common-scrollbar--imagecard .common-scrollbar__segment--after {
    background: var(--common-scrollbar-track);
}

.common-scrollbar--imagecard .common-scrollbar__controls {
    gap: 8px;
}

.common-scrollbar--imagecard .common-scrollbar__btn {
    inline-size: 40px;
    block-size: 40px;
    position: relative;
    padding: 8px;
    border: none;
    background: transparent;
    border-radius: 4px;
    color: var(--color-primary-dark, #00569B);
}

.common-scrollbar--imagecard .common-scrollbar__btn::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid var(--color-grey-2, #E6E6E6);
    border-radius: 4px;
    background: #ffffff;
    z-index: 0;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.common-scrollbar--imagecard .common-scrollbar__btn .icon {
    position: relative;
    z-index: 1;
}

.common-scrollbar--imagecard .common-scrollbar__btn:hover::before {
    background: var(--common-scrollbar-hover-bg, #f2f2f2);
}

.common-scrollbar--imagecard .common-scrollbar__btn:focus-visible,
.common-scrollbar--imagecard .common-scrollbar__btn:focus,
.common-scrollbar--imagecard .common-scrollbar__btn:active {
    border: none;
    outline: none;
    background: transparent;
}

.common-scrollbar--imagecard .common-scrollbar__btn:focus-visible::before,
.common-scrollbar--imagecard .common-scrollbar__btn:focus::before,
.common-scrollbar--imagecard .common-scrollbar__btn:active::before {
    border: 2px solid var(--common-scrollbar-accent);
    background: var(--common-scrollbar-hover-bg, #f2f2f2);
}

.common-scrollbar--imagecard .common-scrollbar__btn:disabled {
    background: transparent;
    color: var(--color-grey-4, #666666);
}

.common-scrollbar--imagecard .common-scrollbar__btn:disabled::before {
    border-color: var(--color-grey-2, #E6E6E6);
    background: var(--common-scrollbar-hover-bg, #f2f2f2);
}

/* Play/Pause icons must be filled */
.common-scrollbar__btn [data-icon-play].material-symbols-outlined {
    font-variation-settings: "FILL" 1;
}

/* Pause must look like pause_circle (filled) but without the circle */
.common-scrollbar__btn [data-icon-pause].material-symbols-outlined {
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

.common-scrollbar__btn .icon:not(.hidden) {
    display: block;
}

.common-scrollbar__btn .icon.hidden {
    display: none;
}

.common-scrollbar__btn .icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Track */
.common-scrollbar__track {
    position: relative;
    border-radius: 4px;
    transition: background-color 0.15s ease;
    display: flex;
}

/* Segments (shared) */
.common-scrollbar__segment {
    background: var(--common-scrollbar-track);
    transition: box-shadow 0.18s ease;
}

/* Keep segment line clean on hover/drag; shadow belongs only to the thumb */

.common-scrollbar__thumb {
    background: var(--common-scrollbar-thumb);
    box-sizing: border-box;
    box-shadow: var(--common-scrollbar-thumb-shadow);
    cursor: grab;
    transition: width 0.18s ease, height 0.18s ease, box-shadow 0.18s ease;
}

/* Hover / pressed: only the bar (thumb), not the containment line */
.common-scrollbar__thumb:hover,
.common-scrollbar__thumb:active,
[data-common-scrollbar].is-dragging .common-scrollbar__thumb {
    box-shadow: var(--common-scrollbar-thumb-interaction-shadow);
}

/* Small visible separation between thumb and segments (without affecting JS sizing) */
[data-common-scrollbar][data-orientation="horizontal"] .common-scrollbar__thumb {
    border-inline: var(--common-scrollbar-thumb-seam-size) solid var(--common-scrollbar-thumb-seam-color);
    border-block: 0;
    background-clip: padding-box;
}

[data-common-scrollbar][data-orientation="vertical"] .common-scrollbar__thumb {
    border-block: var(--common-scrollbar-thumb-seam-size) solid var(--common-scrollbar-thumb-seam-color);
    border-inline: 0;
    background-clip: padding-box;
}

/* Horizontal */
[data-common-scrollbar][data-orientation="horizontal"] .common-scrollbar__track {
    height: 16px;
    min-width: 120px;
    flex-grow: 1;
    flex-shrink: 1;
    align-items: center;
}

[data-common-scrollbar][data-orientation="horizontal"] .common-scrollbar__segment {
    height: 2px;
    border-radius: 2px;
}

[data-common-scrollbar][data-orientation="horizontal"] .common-scrollbar__thumb {
    height: 4px;
    border-radius: 2px;
}

[data-common-scrollbar][data-orientation="horizontal"] .common-scrollbar__thumb:hover,
[data-common-scrollbar][data-orientation="horizontal"] .common-scrollbar__thumb:active,
[data-common-scrollbar][data-orientation="horizontal"].is-dragging .common-scrollbar__thumb {
    height: 6px;
}

/* Vertical */
[data-common-scrollbar][data-orientation="vertical"] .common-scrollbar__track {
    flex-direction: column;
    align-items: center;
    width: 12px;
    height: 1080px; /* default; can be overridden by parent */
}

[data-common-scrollbar][data-orientation="vertical"] .common-scrollbar__segment {
    width: 2px;
    border-radius: 1px;
}

[data-common-scrollbar][data-orientation="vertical"] .common-scrollbar__thumb {
    width: 4px;
    border-radius: 1px;
}

[data-common-scrollbar][data-orientation="vertical"] .common-scrollbar__thumb:hover,
[data-common-scrollbar][data-orientation="vertical"] .common-scrollbar__thumb:active,
[data-common-scrollbar][data-orientation="vertical"].is-dragging .common-scrollbar__thumb {
    width: 6px;
}

@media (min-width: 1280px) {
    .common-scrollbar {
        gap: 32px;
    }
}

/* Dark example: thumb thicker */
[data-common-scrollbar][data-variant="dark"][data-orientation="vertical"] .common-scrollbar__thumb {
    width: 8px;
    border-radius: 2px;
}

[data-common-scrollbar][data-variant="dark"][data-orientation="vertical"] .common-scrollbar__thumb:hover,
[data-common-scrollbar][data-variant="dark"][data-orientation="vertical"] .common-scrollbar__thumb:active,
[data-common-scrollbar][data-variant="dark"][data-orientation="vertical"].is-dragging .common-scrollbar__thumb {
    width: 10px;
}