@import "../styles";

.c-react-wrapper-donations-with-modal-form {
    width: 100%;
    max-width: 570px;
    @apply flex-shrink-0;
    @apply uses-suspense;
}
.c-donations-form {
    @apply flex flex-col;

    & .--tabs {
        @apply flex items-center;
        @apply overflow-hidden;
        border-radius: 8px 8px 0 0;

        & .c-tab {
            @apply py-20;
            @apply w-1-2;
            @apply md:text-18 text-16 leading-160 text-textColor6 font-semibold;
            @apply bg-backgroundColorG;
            @apply border-b-3 border-borderColor6;

            /* Override styles from .c-tab */
            display: block;
            align-items: center;
            padding-left: 0;
            padding-right: 0;
            border-radius: 0;
            margin: 0;

            &.selected {
                @apply bg-backgroundColorA;
                @apply text-prominentLinkColor;
                @apply shadow-xsZ1;
                @apply z-1;
                @apply border-prominentLinkColor;
            }
        }
    }
    & .--content {
        @apply bg-backgroundColorA;
        @apply relative;
        border-radius: 0 0 8px 8px;

        & .existing-subscription {
            @apply bg-lightOrange;
            background: var(--backgroundColorCAlert);
            color: var(--textColorCAlert);
            @apply border-2 border-orange rounded-8;
            @apply text-15 leading-150;
            @apply py-12 px-24 mx-24 mt-24 mb-16;
            & strong {
                @apply font-medium text-15;
            }
            & a {
                @apply underline;
            }
        }
        & .extra-cta {
            @apply rounded-8;
            background: var(--backgroundColorBorderGradientLightPurple);
            @apply text-textColor6 font-medium text-center leading-150;
            @apply py-4 px-24 mx-24;
            & button {
                @apply font-semibold underline;
            }
        }
        & .form-cover {
            @apply absolute;
            top: 150px;
            left: 0;
            bottom: 0;
            right: 0;
            background: var(--backgroundColorDonationFormCover);
            @apply z-overlay;
            @apply cursor-not-allowed;
        }
        & .amounts {
            @apply py-24 px-24;
            @apply border-b-1 border-borderColor6;
            & .preset-amounts {
                @apply grid grid-cols-4 gap-x-16;
                @apply mb-20;

                & button {
                    @apply text-textColor6;

                    &.selected {
                        @apply text-prominentLinkColor;
                        @apply border-2 border-prominentLinkColor;
                        background: var(--backgroundColorDonationsFormSelected);
                    }
                }
            }

            & h3 {
                @apply text-16 leading-150 font-semibold;
                @apply text-textColor6;
                @apply mb-8;
            }

            & .c-faux-input {
                & input {
                    min-width: 0;
                    @apply flex-grow;
                    line-height: 34px;
                }
                &.selected {
                    background: var(--backgroundColorDonationsFormSelected);
                    @apply border-1 border-prominentLinkColor;
                    box-shadow: 0px 0px 0px 1px #2e57e8,
                        0px 0px 2px 2px var(--inputBoxShadowColorFocus);
                    & input {
                        @apply text-prominentLinkColor font-semibold;
                    }
                }
            }
        }
        & form {
            @apply py-24 px-24;
        }
        & .email-container {
            margin-top: -8px;
            @apply pb-16 mb-24;
            @apply border-b-1 border-borderColor6;
            & label {
                @apply block;
                @apply text-16 leading-150 font-semibold;
                @apply text-textColor6;
                @apply mb-8;
            }
            & input {
                @apply w-100;
            }
        }
        & .card-container {
            @apply rounded-8;
            @apply bg-backgroundColorC;
            @apply p-6;
            & .title {
                @apply pb-6;
                @apply text-textColor5 font-medium leading-150 text-center;
            }
            & .card-element {
                @apply bg-backgroundColorA rounded-5;
                @apply py-12 px-16;

                & button {
                    @apply mt-12 w-100;
                }
            }
        }

        & .extra-info {
            @apply mt-16;
            @apply text-13 leading-160 text-textColor6 text-center;
        }
    }

    .g-recaptcha {
        @apply h-[78px];
    }
}
