/* GROUP PLUGINS / SPOTLER FORM
=================================================== */
/* Notes...

    URL example
    -----------
    /landing/creative

    What does it do?
    ----------------
    Style the Spotler form

*/
/* HTML Example...

*/
@layer vendors {
    /* ul */
    .mpFormTable {
        &:has(textarea) {
            /* e.g. >> /landing/social */
        display: grid;

            grid-template-areas:
                "form-1"
                "form-2"
                "button"
            ;
            /* Custom */
            @media (width >= 650px) {
                grid-template-areas:
                    "form-1 form-2"
                    "button button"
                ;
            }
        }
        column-gap: var(--spacing-xs);
        max-width: var(--max-width-reading);
        margin-inline: auto;
        margin-block-end: var(--spacing-vh-m);
        padding-inline: var(--spacing-m);

        & > li {
            grid-column: form-1;
            list-style: none;
        }

        .mpFormLabel {
            margin-block-end: var(--spacing-3xs);
            & label {
                font-weight: var(--font-family-main-weight-semi-bold);
            }
        }

        & input:not([type="submit"]), & textarea {
            width: 100%;
            border-radius: 15px;
            padding: var(--spacing-m);
            border: none;
            background: var(--color-gray-dark);
            color: white;
        }

        & > li:has(textarea) {
            /* e.g. >> /landing/social */
            grid-column: form-2;
            /* Not sure why this isn't working */
            grid-row: form-2 / 5;
            height: 100%!important;
            width: 100%;

            .mpFormField {
                height: calc(100% - var(--spacing-xs) * 1.75);
            }
        }
        textarea {
            height: 100%;
            width: 100%;
        }
        & > li:has([type="submit"]) {
            grid-column: button;
            text-align: right;
        }
        [type="submit"] {
            width: initial;
            /* Increase */
            padding-inline: var(--spacing-l);
        }

        .sublabel {
            font-size: var(--font-size-s-x-x);
        }
        .mpFormField {
            padding-block-end: var(--spacing-2xs);
        }
    }
}