:root {
    --form-box-shadow: inset 0 --border-width .1875rem rgba(#000, .06);
    --form-box-shadow-focus: var(--form-box-shadow),
    0 0 .3125rem #{$action-color};
}

fieldset {
    margin: 0;
    border: 0;
    border: none;
    padding: 0;

    background-color: transparent;
}

legend {
    margin-bottom: var(--spacing--small);
    padding: 0;

    font-weight: 600;
}

label {
    display: block;
    margin-bottom: var(--spacing--small);

    font-weight: 600;
}

input,
select,
textarea {
    display: block;

    font-family: var(--font-family);
    font-size: 1rem;
}

[type="color"],
[type="date"],
[type="datetime"],
[type="datetime-local"],
[type="email"],
[type="month"],
[type="number"],
[type="password"],
[type="search"],
[type="tel"],
[type="text"],
[type="time"],
[type="url"],
[type="week"],
input:not([type]),
textarea {
    margin-bottom: var(--spacing--small);
    border: var(--border);
    border-radius: var(--border-radius);
    box-shadow: var(--form-box-shadow);
    width: 100%;
    padding: calc(var(--spacing) / 3);
    transition: border-color var(--duration) var(--timing);

    background-color: transparent;

    appearance: none;
    box-sizing: border-box;

    &:focus {
        box-shadow: var(--form-box-shadow-focus);
    }

    &:disabled {
        cursor: not-allowed;

        &:hover {
            border: var(--border);
        }
    }

    &::placeholder {
        opacity: .25;

        color: $font-color--base;
    }
}

[type="search"] {
    -webkit-appearance: textfield;
}

textarea {
    resize: vertical;
}

[type="checkbox"],
[type="radio"] {
    display: inline;
    margin-right: var(--spacing--small);
}

[type="file"] {
    margin-bottom: var(--spacing--small);
    width: 100%;
}

select {
    margin-bottom: var(--spacing--small);
    width: 100%;
}

[type="checkbox"],
[
type="radio"],
[type="file"],
select {
    &:focus {
        outline: var(--focus-outline);

        outline-offset: var(--focus-outline-offset);
    }
}