.lienzo-details {
    padding: var(--mp-m);
    border-radius: 15px;
    border: 1px solid var(--wp--preset--color--quinary);
    background: var(--wp--preset--color--primary);
    transition: 0.3s;
    padding: 25px;
    list-style: none; /*fin Iphone*/

    & summary {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: var(--mp-s);
        cursor: pointer;
        color: var(--wp--preset--color--text-primary);
        font-size: var(--wp--preset--font-size--large);
        list-style: none; /*fin Iphone*/

        & > span {
            display: flex;
            align-items: center;
            overflow: hidden;
            position: relative;
            transition: all 0.6s ease;
            padding: 10px;
            border-radius: 50%;
            border: 1px solid 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);
            }
        }

        & .is-open{ display: none;}
        &::marker { content: '';}

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

        &::-webkit-details-marker {
            display: none;
        }
    }

    &::details-content {
        color: var(--c-quinary);
        block-size: 0;
        overflow: hidden;
        transition-property: block-size, content-visibility, margin-top;
        transition-duration: 0.5s;
        transition-behavior: allow-discrete;
    }

    &[open]{
        border-color: var(--wp--preset--color--secondary);

        &::details-content {
            block-size: auto; /* Fallback for browsers that don't support calc-size() function */
            block-size: calc-size(auto, size); /* calc-size() function allows transition to height: auto; */
            margin-top: var(--mp-m);
        }

        & summary{
            & .is-closed{ display: none; }
            & .is-open{ display: flex; }

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

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

.lienzo-details.alignwide{
    display: block;
    max-width: var(--wp--style--global--wide-size);
    
    & a{ justify-content: center; }
}

.lienzo-details.alignfull{
    display: inline;
    width: none;

    & a{ justify-content: center; }
}

.lienzo-details.aligncenter{
    justify-content: center;
}

.lienzo-details.alignright{
    justify-content: right;
}

.lienzo-details.alignleft{
    justify-content: left;
}

.editor-styles-wrapper .lienzo-details {
    pointer-events: auto;
}

.editor-styles-wrapper .lienzo-details summary {
    pointer-events: auto;
}

.editor-styles-wrapper .lienzo-details .content {
    pointer-events: auto;
}