$side-panel-handle-width: 30px;

.side-panel {
    transition: transform 500ms;
    background-color: $content-background-color;
    position: absolute;
    z-index: 13;
    min-height: calc(100% - 95px);
    max-height: calc(100% - 95px);
    height: calc(100% - 97px);
    width: 60%;
    max-width: 800px;
    bottom: 0;
    right: 0;
    transform: translate(calc(100% + #{$side-panel-handle-width}),0%);

    @media (max-width: $max-screen-md) {
        width: 100%;
        max-width: 100%;
    }

    &.open {
        transform: translate(0%, 0%);
    }

    &.no-tabs {
        min-height: calc(100% - 118px);
        max-height: calc(100% - 118px);
    }

    .side-panel-content {
        height: 100%;
        overflow-y: scroll;

        .side-panel-loader {
            position: absolute;
            height: 100%;
            width: 100%;
            color: $tabs-nonactive-text;
            text-align: center;

            i {
                position: absolute;
                top: 50%;
                font-size: 20px;
            }

            &.side-panel-loader-media {
                background-color: $menu-color;
            }
        }

        embed {
            position: absolute;
            height: 100%;
            width: 100%;
        }
    }

    .side-panel-handle {
        height: $side-panel-handle-width;
        line-height: $side-panel-handle-width;
        background-color: $accent-color;
        position: absolute;
        z-index: 1;
        left: 0;
        top: 0;
        @include transform(rotate(270deg) translate(-100%,-100%));
        @include transform-origin((0 0));
        color: $icon-color;
        cursor: pointer;

        @media (max-width: $max-screen-md) {
            right: 0;
            left: auto;
            @include transform(rotate(270deg) translate(0%,-100%));
            @include transform-origin((top right));
        }

        .side-panel-handle-icon {
            display: inline-block;
            border-right: solid 1px $icon-color;
            padding: 0 8px;
            height: 100%;
        }

        .side-panel-handle-text {
            display: inline-block;
            padding: 0 15px;
            padding-left: 10px;
            height: 100%;
        }
    }
}
