/* Form Layout */
form {
    max-width: var(--golden-line-length);
    margin: auto;
}

/* Field Container */
.field {
    margin-bottom: var(--golden-m);
}

/* Labels */
label {
    display: block;
    font-weight: 700;
    margin-bottom: var(--golden-xs);
    color: var(--black);
}

/* Text Inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="time"],
textarea,
select {
    width: 100%;
    padding: var(--golden-xs) var(--golden-s);
    border: 2px solid var(--alt-gray);
    border-radius: var(--golden-xxs);
    font-size: var(--font-size-m);
    font-family: 'Inconsolata', monospace;
    background-color: var(--white);
    box-sizing: border-box;

    &:focus {
        outline: none;
        border-color: var(--pink);
    }

    &::placeholder {
        color: var(--alt-gray);
    }
}

/* Textarea specific */
textarea {
    min-height: calc(var(--golden-xl) * 5);  /* 5 lines minimum */
    resize: vertical;
}

/* Checkbox and Radio */
input[type="checkbox"],
input[type="radio"] {
    margin-right: var(--golden-xs);
    cursor: pointer;
}

/* Fieldset */
fieldset {
    border: 2px solid var(--alt-gray);
    border-radius: var(--golden-xs);
    padding: var(--golden-m);
    margin-bottom: var(--golden-m);
}

legend {
    font-weight: 700;
    padding: 0 var(--golden-xs);
}

/* Validation States */
input.error,
textarea.error,
select.error {
    border-color: var(--red);
}

.field-error {
    color: var(--red);
    font-size: var(--font-size-s);
    margin-top: var(--golden-xxs);
}

/* Form Actions */
.form-actions {
    text-align: center;
    margin-top: var(--golden-xl);
}