:root {
    --portal-scrollbar-size: 0.72rem;
    --portal-scrollbar-track: rgba(17, 22, 31, 0.08);
    --portal-scrollbar-thumb: rgba(224, 163, 37, 0.36);
    --portal-scrollbar-thumb-hover: rgba(224, 163, 37, 0.56);
}

html,
body,
body * {
    scrollbar-width: thin !important;
    scrollbar-color: var(--portal-scrollbar-thumb) var(--portal-scrollbar-track) !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
body *::-webkit-scrollbar {
    width: var(--portal-scrollbar-size) !important;
    height: var(--portal-scrollbar-size) !important;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
body *::-webkit-scrollbar-track {
    border-radius: 999px !important;
    background: var(--portal-scrollbar-track) !important;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
body *::-webkit-scrollbar-thumb {
    min-height: 2.5rem !important;
    border: 2px solid transparent !important;
    border-radius: 999px !important;
    background: var(--portal-scrollbar-thumb) !important;
    background-clip: padding-box !important;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
body *::-webkit-scrollbar-thumb:hover {
    background: var(--portal-scrollbar-thumb-hover) !important;
    background-clip: padding-box !important;
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner,
body *::-webkit-scrollbar-corner {
    background: transparent !important;
}