.button-float-modal {
    background: var(--wp--preset--gradient--double-corner);
    backdrop-filter: blur(37px);
    border-radius: 15px;
    position: fixed;
    bottom: 10px;
    left: 33px;
    right: 33px;
    padding: 25px;
    box-sizing: content-box;
    z-index: 1000;

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        border-radius: 15px;
        background: 
            linear-gradient(54deg, var(--wp--preset--color--primary) 10%, 
            color-mix(in srgb, var(--wp--preset--color--secondary), black 30%) 45%, 
            color-mix(in srgb, var(--wp--preset--color--secondary), white 15%) 50%, 
            color-mix(in srgb, var(--wp--preset--color--secondary), black 30%) 55%, 
            var(--wp--preset--color--primary) 90%)
        ;
        padding: 1px;
        mask: linear-gradient(white, white) content-box, linear-gradient(white, white) border-box;
        mask-composite: exclude;
    }

    & .description{
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 10px;

        & > p{
            color: white;
            font-size: 16px;
            font-weight: bold;
            text-shadow: 0 0 5px #000;
            font-weight: 400;
        }

        & > button{
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            overflow: hidden;
            position: relative;
            text-decoration: none !important;
            transition: all 0.6s ease;
            outline: 0;
            padding: 10px;
            padding-right: 25px;
            border-radius: 50px;
            color: var(--wp--preset--color--text-primary) !important;
            border: 1px solid var(--wp--preset--color--tertiary);
            background: var(--wp--preset--color--tertiary);
            box-shadow: 0 0 15px 0 var(--wp--preset--color--tertiary);

            & svg {
                border-radius: 50%;
                width: 45px;
                height: 45px;
                display: grid;
                transition: all 0.6s ease;
                justify-content: center;
                align-content: center;
                background: var(--wp--preset--color--primary);
                color: var(--wp--preset--color--tertiary);
                border: 1px solid var(--wp--preset--color--tertiary);
                stroke: var(--wp--preset--color--tertiary);
                padding: 10px;
            }
    
            &:hover{
                background: var(--wp--preset--color--tertiary);
                box-shadow: 0 0 0px 0 var(--wp--preset--color--tertiary);
            }
        }
    }

    & dialog{
        padding: 30px;
        background: transparent;
        border: none;

        & > div{
            display: grid;
            gap: 20px;
            background: var(--wp--preset--gradient--double-corner);
            backdrop-filter: blur(37px);
            border-radius: 15px;
            max-width: 900px;
            padding: 20px;
            position: relative;

            &::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: -1;
                border-radius: 15px;
                background: 
                    linear-gradient(54deg, var(--wp--preset--color--primary) 10%, 
                    color-mix(in srgb, var(--wp--preset--color--secondary), black 30%) 45%, 
                    color-mix(in srgb, var(--wp--preset--color--secondary), white 15%) 50%, 
                    color-mix(in srgb, var(--wp--preset--color--secondary), black 30%) 55%, 
                    var(--wp--preset--color--primary) 90%)
                ;
                padding: 1px;
                mask: linear-gradient(white, white) content-box, linear-gradient(white, white) border-box;
                mask-composite: exclude;
            }

            & .content-btn{
                position: absolute;
                top: -25px;
                right: -25px;
                
                & button{
                    display: flex;
                    align-items: center;
                    cursor: pointer;
                    overflow: hidden;
                    position: relative;
                    text-decoration: none !important;
                    transition: all 0.6s ease;
                    font-weight: 500;
                    outline: 0;
                    padding: 10px;
                    border-radius: 50%;
                    border: 1px solid var(--wp--preset--color--secondary);
                    background: var(--wp--preset--color--primary);

                    &:hover {
                        background: var(--wp--preset--color--secondary);
                    }

                    & svg {
                        border-radius: 50%;
                        width: 30px;
                        height: 30px;
                        display: grid;
                        transition: all 0.6s ease;
                        justify-content: center;
                        align-content: center;
                        background: var(--wp--preset--color--primary);
                        stroke: var(--wp--preset--color--secondary);

                        & path{
                            stroke: var(--wp--preset--color--secondary);
                        }
                    }
                }
            }
        }
    }
}

dialog[id^="alert-dialog"]::backdrop {
    background: linear-gradient(#000d, #000a);
}

@media screen and (max-width: 600px){
    .button-float-modal {
        padding: 10px;
        left: 5px;
        right: 5px;

        & .description{
            grid-template-columns: 1fr;
            text-align: center;

            & p{
                font-size: 12px;
            }

            & > button{
                padding: 10px;
                padding-right: 25px;
                font-size: 12px;
                
                & svg {
                    width: 25px;
                    height: 25px;
                    padding: 5px;
                }
            }
        }
    }
}