.wp-block-details{
    border-radius: var(--cd--preset--border-radius--rounded);
    transition-property: box-shadow;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;

    &.is-style-shadow{
        box-shadow: 0px 2px 0.5px rgba(25, 33, 61, 0.1);
    }

    summary{
        align-items: flex-start;
        display: flex;
        font-weight: 600;
        justify-content: space-between;

        &::after{
            background-image: url(../../images/plus.svg);
            background-position: 0 2px;
            background-repeat: no-repeat;
            background-size: contain;
            content: '';
            height: 16px;
            margin-left: 15px;
            min-height: 16px;
            min-width: 16px;
            transition-property: rotate;
            transition-duration: 0.2s;
            transition-timing-function: ease-in-out;
            width: 16px;
        }
    }  

    &[open]{
        &.is-style-shadow{
            box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        }

        > summary{
            &::after{
                rotate: 45deg;
            }
        }
    }
}

/* Remove default arrow in all browsers */
/* Chrome, Firefox & Edge */
summary{
    &::marker{
        content:"";
    }
}

/* Safari (NB: Safari doesn't recognise this rule if it's using nested CSS. Must be in a single-line, top-level rule.) */
summary::-webkit-details-marker {
    display: none;
}