/**
 * اسکرول‌بار برند — رنگ thumb با درصد اسکرول (#2563eb → #f04238)
 * متغیرها توسط brand-scrollbar.js بروز می‌شوند.
 */

:root {
    --hpb-scrollbar-size: 12px;
    --hpb-scrollbar-track: rgba(37, 99, 235, 0.06);
    --hpb-scrollbar-thumb: #2563eb;
    --hpb-scrollbar-thumb-hover: #1d4ed8;
    --hpb-scrollbar-radius: 999px;
}

html.hpb-brand-scrollbar,
body.hpb-brand-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: var(--hpb-scrollbar-thumb) var(--hpb-scrollbar-track);
}

html.hpb-brand-scrollbar::-webkit-scrollbar,
body.hpb-brand-scrollbar::-webkit-scrollbar {
    width: var(--hpb-scrollbar-size);
    height: var(--hpb-scrollbar-size);
}

html.hpb-brand-scrollbar::-webkit-scrollbar-track,
body.hpb-brand-scrollbar::-webkit-scrollbar-track {
    background: var(--hpb-scrollbar-track);
}

html.hpb-brand-scrollbar::-webkit-scrollbar-thumb,
body.hpb-brand-scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--hpb-scrollbar-thumb);
    border-radius: var(--hpb-scrollbar-radius);
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background-color 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

html.hpb-brand-scrollbar::-webkit-scrollbar-thumb:hover,
body.hpb-brand-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: var(--hpb-scrollbar-thumb-hover);
    transition-duration: 0.25s;
}

html.hpb-brand-scrollbar::-webkit-scrollbar-corner {
    background: transparent;
}

@media (prefers-reduced-motion: reduce) {
    html.hpb-brand-scrollbar::-webkit-scrollbar-thumb,
    body.hpb-brand-scrollbar::-webkit-scrollbar-thumb {
        transition: none;
    }
}

@media (max-width: 767px) {
    html.hpb-brand-scrollbar,
    body.hpb-brand-scrollbar {
        scrollbar-width: auto;
    }

    html.hpb-brand-scrollbar::-webkit-scrollbar,
    body.hpb-brand-scrollbar::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
}