:root {
    --sb-size: 8px;
    --sb-thumb: rgba(128, 137, 152, .38);
    --sb-thumb-hover: rgba(128, 137, 152, .62);
}

@media (hover: hover) and (pointer: fine) {
    ::-webkit-scrollbar {
        width: var(--sb-size);
        height: var(--sb-size);
    }

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

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

    ::-webkit-scrollbar-thumb {
        background-color: var(--sb-thumb);
        border-radius: 999px;
        border: 1px solid transparent;
        background-clip: padding-box;
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: var(--sb-thumb-hover);
    }

    ::-webkit-scrollbar-thumb:active {
        background-color: var(--sb-thumb-hover);
    }

    @supports not selector(::-webkit-scrollbar) {
        * {
            scrollbar-width: thin;
            scrollbar-color: var(--sb-thumb) transparent;
        }
    }
}

html {
    -webkit-tap-highlight-color: transparent;
}

*,
*::before,
*::after {
    -webkit-tap-highlight-color: transparent;
}

button,
[role="button"],
.icon-btn,
.search-btn,
.nav-btn,
.dropdown-item,
.type-chip,
.time-btn {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html.meva-app {
    --safe-top: 0px;
    --safe-bottom: 0px;
}