form[name=signup] {
    display: grid;
    gap: 1rem;

    > div {
        display: contents;

        label { font-weight: bold; }

        &:has(input[type=checkbox]) {
            display: flex;
            flex-direction: row;
            gap: 0.5rem;

            input { order: -1; }
        }

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

    .input-icon {
        position: relative;
        grid-template-columns: auto -20px;
        grid-template-rows: auto auto;

        label { grid-column: 1/3;}

        input {
            grid-column: 1/3;
            width: 100%;
        }

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

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

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

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

    .term-agreement {
        > div {

            display: flex;
            padding: 1em;
            max-width: 350px;
            justify-self: center;
        }

        input {
            height: 2em;
            width: 2em;
        }

        label { align-self: center; }
    }
}