form{
    --_columns: 1;

    display: grid;
    grid-template-columns: repeat(var(--_columns), minmax(0, 1fr));
    gap: 12px;

    &[invalid]::after{
        content: attr(invalid);
        font: var(--_font-size-sm)/1.2 var(--_font-family-bold);
        color: var(--_color-orange-2);
        text-align: start;
        margin-block: -4px 0;
    }

    fieldset{
        border: none;
        display: flex;
        flex-flow: row wrap;
        gap: 1ch;

        &:has(> [type="submit"]){
            padding-block: .25ch 0;
        }

        &:has(> :is([type="text"], [type="number"])){
            display: flex;
            flex-flow: column wrap;
            align-items: start;
            gap: 8px;
        }
    }

    label{
        display: block;

        &:has(~ :is([type="text"], [type="number"])){
            color: var(--_color-gray-4);
        }
    }

    input{
        font: var(--_font-size-p)/1.2 var(--_font-family-regular);
        accent-color: var(--_color-black);
        inline-size: 17px;
        block-size: 16px;

        &[type="radio"]{
            ~ label{
                text-align: start;
                cursor: pointer;
                align-content: center;
                flex: 1;
            }
        }

        &:is([type="text"], [type="number"]){
            inline-size: 100%;
            min-block-size: 40px;
            padding-inline: 12px;
            padding-block: 8px;
            border: 1.5px solid var(--_color-gray-2);
        }
    }

    [type="submit"]{
        position: relative;
        transition: all .3s ease .3s;

        &::before{
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            translate: -50% -50%;
            background-image: url(/img-new/icon/thumbs-up-white.svg);
            background-position: center;
            background-repeat: no-repeat;
            background-size: 20px 20px;
            inline-size: 20px;
            block-size: 20px;
            opacity: 0;
            visibility: hidden;
            transition: all .3s ease .3s;
            z-index: -1;
        }
    }

    &[freeze]{
        :is(input, [type="submit"]){
            pointer-events: none;
            cursor: not-allowed;
        }

        [type="submit"]{
            opacity: .5;
        }
    }

    &[success]{
        &::after{
            content: attr(success);
            max-inline-size: 24ch;
            font: var(--_font-size-sm)/1.2 var(--_font-family-medium);
            color: var(--_color-gray-4);
            text-align: start;
            white-space: normal;
        }
        
        [type="submit"]{
            color: transparent;
            transition: all .3s ease;

            &::before{
                opacity: 1;
                z-index: 1;
                visibility: visible;
                transition: all .3s ease;
            }
        }
    }
}

@keyframes form-loading {
    from { color: transparent; }
    to { color: inherit; }
}