html,
body {
    touch-action: manipulation;
    overscroll-behavior-y: contain;
    /* disable pull to refresh */
}

* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}


/* help ripple to fit with border radius
reference: https://github.com/material-components/material-components-web/issues/5333
*/

.mdc-button__ripple {
    mask-image: linear-gradient(rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 1.0))!important;
    -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 1.0))!important;
}