:where(button, input):where(:not(:active)):focus-visible {
    outline-offset: 5px;
}

/* All buttons */
:where(
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    input[type="file"]
),
/* ::file-selector-button does not work inside of :where() */
:where(input[type="file"])::file-selector-button {
    --_color: var(--color, var(--accent));

    background-color: var(--_color);
    color: black;

    border: 2px solid var(--_color);

    font: inherit;
    letter-spacing: inherit;
    line-height: 1.5;

    border-radius: 1rem;
    padding: 0.5em;

    font-weight: 700;

    object-fit: contain;

    /*display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1ch;*/

    cursor: pointer;
    transition: all 0.2s ease-out;

    user-select: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;

    &:is(:hover, :focus-visible) {
        --_hoverColor: oklch(from var(--color, var(--accent)) 40% c h);
        --_color: var(--hoverColor, var(--_hoverColor));
    }

    &.secondary {
        --color: lightgreen;
        /*--hoverColor: lawngreen;*/
    }

    &.outline {
        background: transparent;
        color: var(--_color);
    }
}

/* on hover but not active */
:where(
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"]):where(:not(:active):hover
) {

}

:where([type="reset"]) {
    color: red;
}

:where([type="reset"]:focus-visible) {
    outline-color: currentColor;
}


:where(button,
input[type="button"],
input[type="submit"],
input[type="reset"]
)[disabled] {

    cursor: not-allowed;
}

:where(input[type="file"]) {
    inline-size: 100%;
    max-inline-size: max-content;
}

:where(input[type="button"]),
:where(input[type="file"])::file-selector-button {
    appearance: none;
}