html {
    -webkit-overflow-scrolling: touch;
}

body {
    -webkit-overflow-scrolling: touch;
}

button, a, input[type="submit"], input[type="button"], [role="button"], .clickable {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

button:focus-visible, a:focus-visible, input[type="submit"]:focus-visible, input[type="button"]:focus-visible {
    outline: 2px solid #3B82F6;
    outline-offset: 2px;
}

input:not([type="radio"]):not([type="checkbox"]), textarea, select {
    -webkit-appearance: none;
    appearance: none;
    -webkit-user-select: text;
    user-select: text;
}

.btn-primary, .btn-secondary, .btn-danger {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.btn-primary.is-active, .btn-primary:active {
    transform: scale(0.98);
    opacity: 0.9;
}

.btn-secondary.is-active, .btn-secondary:active {
    transform: scale(0.98);
    opacity: 0.9;
}

.btn-danger.is-active, .btn-danger:active {
    transform: scale(0.98);
    opacity: 0.9;
}

button.is-active, a.is-active, [role="button"].is-active {
    transform: scale(0.98);
    opacity: 0.85;
}

.modal, .fixed {
    -webkit-overflow-scrolling: touch;
}

input[type="text"], input[type="password"], input[type="number"], input[type="time"], textarea {
    -webkit-user-select: text;
    user-select: text;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    button, a, input[type="submit"], input[type="button"], [role="button"], .clickable {
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
}

@media (hover: hover) {
    button:hover, a:hover, [role="button"]:hover {
        opacity: 0.9;
    }
}