form {
    .input-wrapper {
        margin-bottom: 1rem;

        label {
            display: block;
            font-weight: 600;
            margin-bottom: 5px;
        }

        input[type="text"],
        input[type="email"],
        input[type="password"] {
            transition: border-color 150ms ease-out;
            outline: none;
            border: 2px solid #ccc;
            border-radius: 4px;
            height: 40px;
            line-height: 36px;
            padding-inline: 1rem;
            width: 100%;

            &:hover,
            &:focus {
                border-color: var(--color-dark);
            }

            &:focus {
                outline: 2px solid var(--color-primary);
                outline-offset: 1px;
            }

            &:not(:focus).invalid {
                border-color: var(--color-warn);
            }
        }
    }

    .error-message {
        color: var(--color-warn);
        font-size: 14px;
        font-weight: 600;
    }
}