//
//  Collapsible
//



//
//  Common
//  _____________________________________________

& when (@media-common = true) {

.collapsible .block-title,
.mobile-collapsible .block-title
{
    padding-top:8px;
    padding-bottom:8px;
    border-bottom:1px solid #f2f2f2;
    border-color:rgba(0,0,0, 0.05);
    margin-bottom:10px;
    font-size:18px;
    line-height:1.25em;
    font-weight:normal;
}

.collapsible .block-content,
.collapsible .block-content > * {
    margin-top:0; /* Prevent animation jumping */
}

//
//  Opener (deprecated)
//  ---------------------------------------------

.collapsible .opener {
    position:absolute;
    right:0;
    top:2px;
    display:block;
    cursor:pointer;
    text-align:center;
    
    width:30px;
    height:30px;
    line-height:30px;

    background-position:center center;
    background-repeat:no-repeat;
    background-color:#f2f2f2; /*IE*/
    background-color:rgba(0,0,0, 0.05);
}
.collapsible .opener:hover {
    background-color:#e5e5e5; /*IE*/
    background-color:rgba(0,0,0, 0.1);
}

//
//  Shared styles of different types of collapsible blocks
//  ---------------------------------------------

.collapsible .block-title:after,
.mobile-collapsible .block-title:after,
.sidebar .block .block-title:after {
    float: right;
    font-size: 22px;

    // // TODO: temporarily removed icons from collapsible blocks
    // display: none !important;
}

.collapsible .block-title,
.mobile-collapsible .block-title,
.sidebar .block .block-title {
    cursor: pointer;
}



} // end: media-common



//
//  Mobile
//  _____________________________________________

// .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
// }



//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {

    // Hide arrow (and set default cursor) in blocks which are collapsible only on mobile
    .mobile-collapsible .block-title:after,
    .sidebar .block .block-title:after {
        display: none !important;
    }

    .mobile-collapsible .block-title,
    .sidebar .block .block-title {
        cursor: default;
    }

    // TODO: check if specific enough
    .mobile-collapsible .block-title {
        border-bottom: none;
    }

}
