/* Recurso público: ativar h-rolagem-fio-minimo no host h-ui-aplicativo.
   --h-rolagem-fio personaliza a cor; a rolagem e o espaço reservado permanecem ativos. */
:root.h-ui-aplicativo.h-rolagem-fio-minimo :where(*) {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

:root.h-ui-aplicativo.h-rolagem-fio-minimo :where(*):hover,
:root.h-ui-aplicativo.h-rolagem-fio-minimo :where(*):focus-within,
:root.h-ui-aplicativo.h-rolagem-fio-minimo :where(.hgrid-wrap:focus-within .hgrid-scroll) {
    scrollbar-color: var(--h-rolagem-fio, #a8d5ba) transparent;
}

@supports selector(::-webkit-scrollbar) {
    :root.h-ui-aplicativo.h-rolagem-fio-minimo :where(*),
    :root.h-ui-aplicativo.h-rolagem-fio-minimo :where(*):hover,
    :root.h-ui-aplicativo.h-rolagem-fio-minimo :where(*):focus-within,
    :root.h-ui-aplicativo.h-rolagem-fio-minimo :where(.hgrid-wrap:focus-within .hgrid-scroll) {
        scrollbar-width: auto;
        scrollbar-color: auto;
    }

    :root.h-ui-aplicativo.h-rolagem-fio-minimo :where(*)::-webkit-scrollbar {
        width: 9px;
        height: 9px;
        background: transparent;
    }

    :root.h-ui-aplicativo.h-rolagem-fio-minimo :where(*)::-webkit-scrollbar-track,
    :root.h-ui-aplicativo.h-rolagem-fio-minimo :where(*)::-webkit-scrollbar-corner {
        background: transparent;
    }

    :root.h-ui-aplicativo.h-rolagem-fio-minimo :where(*)::-webkit-scrollbar-button {
        display: none;
        width: 0;
        height: 0;
    }

    :root.h-ui-aplicativo.h-rolagem-fio-minimo :where(*)::-webkit-scrollbar-thumb {
        border-left: 6px solid transparent;
        border-radius: 9px;
        background: transparent;
        background-clip: padding-box;
    }

    :root.h-ui-aplicativo.h-rolagem-fio-minimo :where(*)::-webkit-scrollbar-thumb:horizontal {
        border-left: 0;
        border-top: 6px solid transparent;
    }

    :root.h-ui-aplicativo.h-rolagem-fio-minimo :where(*):hover::-webkit-scrollbar-thumb,
    :root.h-ui-aplicativo.h-rolagem-fio-minimo :where(*):focus-within::-webkit-scrollbar-thumb,
    :root.h-ui-aplicativo.h-rolagem-fio-minimo :where(.hgrid-wrap:focus-within .hgrid-scroll)::-webkit-scrollbar-thumb {
        background-color: var(--h-rolagem-fio, #a8d5ba);
    }
}

@media (hover: none) {
    @supports not selector(::-webkit-scrollbar) {
        :root.h-ui-aplicativo.h-rolagem-fio-minimo :where(*) {
            scrollbar-color: var(--h-rolagem-fio, #a8d5ba) transparent;
        }
    }

    :root.h-ui-aplicativo.h-rolagem-fio-minimo :where(*)::-webkit-scrollbar-thumb {
        background-color: var(--h-rolagem-fio, #a8d5ba);
    }
}

/* Recurso público opt-in para áreas com indicador sempre curto, mantendo a área nativa de interação. */
@supports selector(::-webkit-scrollbar) {
    :root.h-ui-aplicativo.h-rolagem-fio-minimo :where(.h-rolagem-fio-curto,.h-rolagem-fio-curto *)::-webkit-scrollbar-thumb {
        background-color:transparent;
        background-image:linear-gradient(transparent,transparent);
        background-size:3px 24px;
        background-position:right center;
        background-repeat:no-repeat;
    }
    :root.h-ui-aplicativo.h-rolagem-fio-minimo :where(.h-rolagem-fio-curto,.h-rolagem-fio-curto *):hover::-webkit-scrollbar-thumb,
    :root.h-ui-aplicativo.h-rolagem-fio-minimo :where(.h-rolagem-fio-curto,.h-rolagem-fio-curto *):focus-within::-webkit-scrollbar-thumb {
        background-color:transparent;
        background-image:linear-gradient(var(--h-rolagem-fio,var(--h-azul)),var(--h-rolagem-fio,var(--h-azul)));
    }
    :root.h-ui-aplicativo.h-rolagem-fio-minimo :where(.h-rolagem-fio-curto,.h-rolagem-fio-curto *)::-webkit-scrollbar-thumb:horizontal {
        background-size:24px 3px;
        background-position:center bottom;
    }
    @media(hover:none) {
        :root.h-ui-aplicativo.h-rolagem-fio-minimo :where(.h-rolagem-fio-curto,.h-rolagem-fio-curto *)::-webkit-scrollbar-thumb {
            background-image:linear-gradient(var(--h-rolagem-fio,var(--h-azul)),var(--h-rolagem-fio,var(--h-azul)));
        }
    }
}