.form-toggler {
    --base-height: 64px;

    padding: 0 8vw;



    .container {
        --animation-time: 0.25s;

        padding: 32px;

        p {
            font-size: 2rem;
            font-weight: 600;
            margin: 0;
            transition: color var(--animation-time);
        }

        &::after {
            display: none;
            position: absolute;
            right: 32px;
            top: 0;
            transform: translateY(50%);
            align-self: start;
            content: "";
            background: url("https://myfuture.cimaglobal.com/images/custom/01/865667d248eb61da987f7a9943f756/w610/h228/wpopng/images/uploads/01865667d248eb61da987f7a9943f756.webp");
            background-repeat: no-repeat;
            aspect-ratio: 380 / 142;
            background-size: 100% 100%;
            height: var(--base-height);
        }

        .content {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;

            min-height: var(--base-height);
            transition: height var(--animation-time);

            button {
                display: flex;
                justify-content: space-between;
                gap: 8px;
                align-items: center;
                background-size: 400% 400%;
                padding: 12px 16px;
                box-shadow: rgba(0,0,0,.5) 4px 4px 6px 4px;
                background-position:100% 50%;
                transition: background-position var(--animation-time);
                cursor: pointer;
                z-index: 2;

                &::after {
                    display: block;
                    content: "";
                    clip-path: path('M4 24 L 8 28 L 20 16 L 8 4 L 4 8 L 12 16 L 4 24');
                    transition: background-color var(--animation-time);
                    aspect-ratio: 11 / 16;
                    height: 32px;
                    transition: transform var(--animation-time) cubic-bezier(0.175, 0.885, 0.6, 1.8);
                }

                &:hover {
                    background-position: 0% 50%;
                }

                &.active {
                    &::after {
                        transform: rotate(90deg);
                    } 
                }
            }

            [data-toggle-id] {

                &:has(form) {
                    opacity: 0;
                    pointer-events: none;
                    width: 100%;
                    max-width: none;
                    transition: opacity calc(0.5 * var(--animation-time)),
                    transform var(--animation-time),
                    max-height var(--animation-time);
                    max-height: 0;

                    &.active {
                        opacity: 1;
                        pointer-events: all;
                        max-height: 2000px;
                    }
                }

            }

            @media (min-width: 768px) {
                button {
                    gap: 16px;

                    p {
                        font-size: 2.4rem;
                    }
                }
            }
        }

        @media (min-width: 768px) {
            &::after {
                display: block;
            }

            .content {
                align-items: start;
            }
        }

    }

    &.purple {
        .container {
            background-image: linear-gradient(347.01deg, #361C4A 25.19%, #72246C 79.78%);

            .content {
                button {
                    background-image: linear-gradient(68.66deg, #672D89 2.5%, #9C2463 40%,#fff 70%);

                    p {
                        color: #361c4a;
                    }
    
                    &::after {
                        background-color: #361c4a;
                    }

                    &:hover {
                        p {
                            color: #fff;
                        }

                        &::after {
                            background-color: #fff;
                        }
                    }
                }

                [data-toggle-id] {
                    form {
                        background-color: #fff;
                    }
                }
            }    
        }
    }

    &.transparent {
        .container {
            padding: 0;

            .content {
                button {
                    background-image: linear-gradient(68.66deg, #672D89 70%, #9C2463 100%);

                    p {
                        color: #fff;
                    }
    
                    &::after {
                        background-color: #fff;
                        
                    }

                    &:hover {
                        background-position: 100% 50%;
                    }
                }

                [data-toggle-id] {
                    form {
                        background-color: #fff;
                    }
                }
            }    
        }
    }

    

    

    @media screen and (min-width: 93.75em) {
        padding: 0 10vw;
    }

    @media screen and (min-width: 106.25em) {
        padding: 0 16vw;
    }
    
}