@use 'fn';

.give-personal-info-section {
    & fieldset:not(.ffm-field-container > fieldset) {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        column-gap: fn.scaleBetween(1.5rem, 1.6875rem);
        row-gap: fn.scaleBetween(1.5rem, 1.9375rem);
        grid-column: span 12;

        & legend:first-of-type {
            width: 100%;
            padding-block-end: 0.75rem;
            margin-block-end: 1rem;
            border-block-end: 0.0625rem solid #ddd;
            font-size: fn.scaleBetween(1.25rem, 1.5rem);
            font-weight: 500;
            line-height: 1.3;
            color: #333;
        }

        > .form-row-wide, div, p {
            grid-column: span 12;
        }

        > .form-row-responsive {
            grid-column: span 12;

            @media screen and (min-width: $desktopMinWidth) {
                grid-column: span 6;
            }
        }
    }

    #give-title-wrap label,
    #give-first-name-wrap label,
    #give-last-name-wrap label,
    #give-email-wrap label {
        @include visually-hidden;
    }

    & .give-input[type='text'],
    & .give-input[type='email'] {
        inline-size: 100%;
        padding: 1.1875rem;
        border: 0.078rem solid #666;
        border-radius: 0.25rem;
        box-shadow: inset 0 0.08em 0.4em rgba(0, 0, 0, 0.15);
        background-color: #fff;
        color: #828382;
        font-size: 1rem;
        font-family: inherit;
        font-weight: 500;
        line-height: 1.2;
    }

    & div[id^="give-user-login-submit"] {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        column-gap: fn.scaleBetween(1.5rem, 1.6875rem);

        & input {
            grid-column: span 6;
        }
    }
}

.give-personal-info-description {
    grid-column: span 12;
}

#give-title-wrap {
    grid-column: span 2;


    ~ :is(#give-first-name-wrap, #give-last-name-wrap)  {
        grid-column: span 5;
    }

    @media screen and (max-width: $containerMaxWidth) {
        grid-column: span 4;

        & + #give-first-name-wrap {
            grid-column: span 8;
        }

        & ~ #give-last-name-wrap {
            grid-column: span 12;
        }
    }
}

#give-first-name-wrap,
#give-last-name-wrap,
#give-email-wrap {
    position: relative;

    &::before {
        position: absolute;
        inset-inline-start: 1.1875rem;
        // The specific inset block coordinates and the fixed block-size allow
        // us to use margin to center the icon on the block-axis.
        inset-block-start: 0;
        inset-block-end: 0.1875em;
        block-size: 1em;
        margin-block: auto;
        color: #8d8e8e;
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        pointer-events: none;
    }
}

#give-first-name-wrap input,
#give-email-wrap input {
    padding-inline-start: 2.6875rem;
}

#give-first-name-wrap::before {
    content: '\f007';
}

#give-company-radio-list-wrap {
    > label {
        display: block;
        margin-bottom: 10px;
    }

    ul.give-company-radio-list {
        margin: 0;
        padding: 0;
        list-style: none;

        li {
            display: inline-flex;
            margin-right: 15px;
            margin-left: 0;

            input {
                margin-right: 7px;
            }

            label {
                cursor: pointer;
                display: inline;
                margin: 0;
            }
        }
    }
}

#give-email-wrap::before {
    content: '\f0e0';
}