//
// Side panel
// --------------------------------------------------

#layout-side-panel {
    .fix-button {
        position: absolute;
        right: -25px;
        top: 0;
        display: none;
        width: 25px;
        height: 25px;
        font-size: 13px;
        background: #ecf0f1;
        z-index: 120;
        .opacity(0.5);
        .border-radius(~'0 4px 4px 0');

        i {
            display: block;
            text-align: center;
            margin-top: 5px;
            color: @color-scrollpanel-fix-button;
        }

        &:hover {
            text-decoration: none;
            display: block;
            .opacity(1)!important;
        }
    }

    &:hover {
        .fix-button {
            display: block;
        }
    }

    .fix-button-content-header .fix-button {
        top: 46px;
    }

    .sidepanel-content-header {
        background: #d35400;
        color: white;
        font-size: 15px;
        padding: 12px 20px 13px;
        position: relative;

        &:after {
            .triangle(down, 15px, 8px, #d35400);
            position: absolute;
            left: 14px;
            bottom: -8px;
        }
    }
}

body.side-panel-not-fixed {
    #layout-side-panel {
        display: none;

        .fix-button {
            .opacity(0.5);
        }
    }
}

body.display-side-panel {
    #layout-side-panel {
        display: block;
        position: absolute;
        // This needs to be higher than the dropdown overlay, otherwise the
        // mouseout event fires and sidebar hides when opening a dropdown.
        z-index: @zindex-dropdown;
        width: 350px;
        .box-shadow(3px 0px 3px 0 rgba(0, 0, 0, 0.1));
    }
}

@media (min-width: @screen-md-min) {
    body.side-panel-fix-shadow {
        #layout-side-panel {
            .box-shadow(none);
        }
    }
}

.touch #layout-side-panel .fix-button {
    display: none;
}

@media (max-width: @screen-sm) {
    #layout-side-panel .fix-button {
        display: none;
    }
}