/* DEFAULTS: FORMS
//////////////////////////////////////////////////////////////////////////////*/

@layer defaults {
    input,
    button,
    textarea,
    select {
        font-size: var(--font-size-m);
        font-family: var(--font-family-copy);
        margin: 0;
    }

    input {
        padding: var(--spacing-s);
        display: block;
        width: 100%;
        border: none;
    }

    input:hover {
        outline: var(--border-width) solid var(--color-text);
    }

    input:focus {
        outline: var(--border-width) solid var(--color-links);
        background-color: var(--color-white);
    }

    [type="search"] {
        border: none;
    }
    [type="text"] {
        outline: 2px solid;
        outline-offset: -2px;
    }

    button,
    .button,
    [type="button"],
    [type="reset"],
    [type="submit"],
    [role="button"] {
        padding: var(--spacing-s);
        background: transparent;

        cursor: pointer;
        border: none;
        color: var(--color-text);
    }
    [type="submit"] {
        outline: 2px solid;
        font-weight: 700;
        outline-offset: -2px;
    }

    select {
        border: 1px solid var(--color-mbz-grey-200);
        border-radius: 0;
        box-shadow: none;
        color: var(--color-text);
        accent-color: var(--color-text);
    }
}