form {
    display: grid;
    gap: 1rem;

    label {
        display: contents;
        font-weight: bold;

        &:has(input[required]) span::after {
            content: '*';
            margin-left: 1ch;
            color: var(--winner-green);
        }

        .input-icon {
            position: relative;
            display: flex;

            input { width: 100%; }

            &:has(input:user-valid:required) .check-icon::after {
                position: absolute;
                content: "\2713";
                color: green;
                right: 10px;
                top: 10px;
            }

            &:has(input:user-invalid:required) .check-icon::after {
                position: absolute;
                content: "\2613";
                color: red;
                right: 10px;
                top: 10px;
            }
        }
    }

    .info { --outline-color: var(--color-1); }

    .actions {
        --outline-color: var(--color-2);
        display: flex;
        justify-content: center;
        gap: 1rem;
    }
}