@layer base {
    * {
        --scrollbar-size: 4px;
        --scrollbar-track: var(--bg-neutral-tertiary-default);
        --scrollbar-thumb: var(--bg-brand-secondary-hover);
        --scrollbar-border-width: 1px;
    }

    *::-webkit-scrollbar {
        width: var(--scrollbar-size);
        height: var(--scrollbar-size);
    }

    *::-webkit-scrollbar-track {
        background: var(--scrollbar-track);
        border-radius: 999px;
    }

    *::-webkit-scrollbar-thumb {
        background: var(--scrollbar-thumb);
        border: var(--scrollbar-border-width) solid var(--scrollbar-track);
        border-radius: 8px;
    }

    ::-webkit-scrollbar-corner {
        background: transparent;
    }

    @supports not selector(::-webkit-scrollbar) {
        * {
            scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
        }
    }
}

/* Utilities override only the variables — no layer conflict, no specificity war */

@utility pyrion-scrollbar-medium {
    --scrollbar-size: 4px;
    --scrollbar-track: var(--bg-neutral-tertiary-default);
    --scrollbar-thumb: var(--bg-brand-secondary-hover);
    --scrollbar-border-width: 1px;
}

@utility pyrion-scrollbar-large {
    --scrollbar-size: 8px;
    --scrollbar-track: var(--bg-neutral-tertiary-default);
    --scrollbar-thumb: var(--bg-brand-secondary-hover);
    --scrollbar-border-width: 2px;
}

/* Alias retrocompat */
@utility pyrion-scrollbar-thin {
    @apply pyrion-scrollbar-medium;
}

@utility pyrion-scrollbar-thin-weak {
    @apply pyrion-scrollbar-medium;
}

@utility pyrion-scrollbar-none {
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
        display: none;
    }
}

@utility scrollbar-stable {
    scrollbar-gutter: stable;
}

@utility scrollbar-stable-both-edges {
    scrollbar-gutter: stable both-edges;
}

@utility scrollbar-stable-auto {
    scrollbar-gutter: auto;
}

@utility pyrion-scrollbar-overlay {
    --sb-overlay-size: 8px;
    padding-inline-end: var(--sb-overlay-size) !important;
    margin-inline-end: calc(-1 * var(--sb-overlay-size)) !important;

    &::-webkit-scrollbar {
        width: var(--sb-overlay-size);
    }
}

@utility pyrion-scrollbar-overlay-x {
    --sb-overlay-size: 8px;
    padding-block-end: var(--sb-overlay-size) !important;
    margin-block-end: calc(-1 * var(--sb-overlay-size)) !important;

    &::-webkit-scrollbar {
        height: var(--sb-overlay-size);
    }
}