.hmn-form {

    input:not([type="submit"]),
    textarea,
    select {
        color: var(--color);
        accent-color: var(--button-color-primary);
        background-color: var(--c3);
        padding: 0.75rem;
        outline: none;

        &:not(.no-border) {
            border: 1px solid var(--border-color);
        }

        &:focus {
            border-color: var(--border-color-focused);

            ~.also-focus {
                border-color: var(--border-color-focused);
            }
        }

        .error &,
        &.error,
        &:user-invalid {
            border-color: var(--border-color-error);
        }

        &:disabled {
            background-color: var(--c5);
            color: var(--c4);
        }
    }

    textarea {
        resize: vertical;
    }

    label {
        font-weight: 600;
    }

    .input-group {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-1);
        line-height: 1.4;
    }

    .error .error-msg {
        color: var(--color-error);
    }

    fieldset {
        margin: 0;
        padding: 0;
        border: 1px solid var(--border-color);
        background-color: var(--c2);
        display: flex;
        flex-direction: column;
    }

    legend {
        background-color: var(--c1);
        font-weight: bold;
        float: left;
        padding: var(--spacing-3);

        &:not(:last-child) {
            border-bottom: 1px solid var(--border-color);
        }
    }
}

button,
input[type=submit],
.btn {
    color: var(--color);
    background-color: var(--button-color);
    cursor: pointer;
    font-weight: 500;
    line-height: 1.5rem;
    border-style: none;

    &.btn-primary {
        background-color: var(--button-color-primary);
    }

    &:not(.no-padding) {
        padding: 0.5rem 1.5rem;
    }
}