/**
 * module Collapsible Widgets
 * extention to widgets.
 * Adds functionality of toggling widget's body
 *
 * @package sbinit
*/
.sb-w-collapsible {
    --icon-open:'\002B';
    --icon-close:'\2212';
    /*--icon-close-transform:rotate(180deg);*/
}
.sb-w-collapsible .wtitle{
    display: flex;
    justify-content: space-between;
}

.sb-w-collapsible .wtitle .indicator{
    line-height: 1;
    visibility: hidden;
    opacity: 0;
    transition-property: transform, opacity, visibility;
    transition-duration: .3s;
}

.collapsible__toggleable .wtitle{
    cursor:pointer;
}
.collapsible__toggleable .wtitle .indicator{
    visibility:visible;
}

.collapsible__toggleable .wtitle .icon {
    display: block;
    position: relative;
    width:1em;
    height: 1em;
}
.collapsible__toggleable .wtitle .icon:before{
    content:var(--icon-open);
    font-size: 2em;
    position: absolute;
    top:50%;
    left: 50%;
    transform:translate( -50%, -50%);
}
.collapsible__toggleable.collapsible__body-visible .wtitle .icon:before{
    content:var(--icon-close);
    /*transform:var(--icon-close-transform);*/
}

/** - */
.collapsible__hide-all .wbody{
    display: none;
}
@media screen and (max-width: 1200px){
    .collapsible__hide-xl .wbody{
        display: none;
    }
}
@media screen and (max-width: 991px){
    .collapsible__hide-lg .wbody{
        display: none;
    }
}
@media screen and (max-width: 769px){
    .collapsible__hide-md .wbody{
        display: none;
    }
}
@media screen and (max-width: 575px){
    .collapsible__hide-sm .wbody{
        display: none;
    }
}