#panel {
    position: fixed;
    top: 0;
    left: -(@nav-width + 300);
    bottom: 0;
    width: 300px;
    z-index: 299;
    background: @block-bg;
    color: @block-color;
    overflow: auto;
    box-shadow: @block-box-shadow-light;
    border-left: 1px darken(@nav-bg, 10%) solid;

    > i {
        font-size: 30px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -15px;
        margin-top: -15px;
    }
}

.panel_is_active {
    #panel {
        left: @nav-width;
        transition: @transition;
    }

    .panel_actions {
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        height: 50px;
        overflow: hidden;

        i {
            font-size: 20px;
            line-height: 50px;
            margin-right: 10px;
        }

        background: darken(@block-bg, 3%);
    }

    #panel:not(.is_feed) {
        .panel_rows {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 50px;
            overflow-x: hidden;
            overflow-y: auto;
        }
    }

    #panel.is_feed {
        z-index: 2000;
        bottom: auto;
        left: 50%;
        top: 0;
        margin-left: -300px;
        width: 600px;
        overflow: visible;

        -moz-transition: none;
        -webkit-transition: none;
        -o-transition: color 0 ease-in;
        transition: none;

        > i {
            position: fixed;
        }
    }
}

.mail_in_shift_mode {
    .panel_rows {
        padding-left: 30px;
        transition: @transition;
    }
}

.panel_rows {
    transition: @transition;
    background: @block-bg;
    color: @block-color;
    position: relative;
    font-size: @font-size-base - 2;

    li {
        position: relative;
        display: block;

        > a, > a:hover, > .panel_row {
            display: block;
            color: @block-color;
            border-bottom: 1px darken(@block-bg, 8%) solid;
            position: relative;
        }

        > a.is_new .panel_focus:before {
            .fa('\f111');
            color: @brand-primary;
            margin-right: 5px;
        }

        .panel_rows_action:hover {
            background: darken(@brand-danger, 15%);
        }
        .panel_rows_action {
            position: absolute;
            left: -30px;
            top: 0;
            bottom: 0;
            background: @brand-danger;
            z-index: 10;
            width: 30px;
            text-align: center;
            margin-bottom: 2px;
            border-radius: 6px 0 0 6px;
            i {
                cursor: pointer;
                color: @brand-primary-color;
                position: absolute;
                left: 0;
                right: 0;
                text-align: center;
                top: 50%;
                margin-top: -14px;
                font-size: 1.5em;
            }
        }

        .panel_rows_time {
            .txt-time();

            font-size: @font-size-base - 3;
            margin-top: 5px;
        }

        .panel_focus {
            .drop_data_user, > span {
                color: @link-color;
                font-weight: 400;
                font-size: @font-size-base - 2;
            }
        }

        .panel_rows_image {
            position: absolute;
            top: 10px;
        }

        .panel_rows_content {
            min-height: 70px;
            padding-top: 10px;
            padding-bottom: 10px;

            .panel_focus {
                word-break: normal;
                word-wrap: break-word;
            }
        }

        .panel_rows_preview {
            padding: 6px 0;
        }

        .drop_data_user {
            color: @link-focus;
        }

        .panel_action {
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px darken(@block-bg, 6%) solid;

            > span {
                display: inline-block;
                background: @brand-primary;
                color: @brand-primary-color;
                text-transform: uppercase;
                padding: 4px 8px;
                font-weight: 600;
                font-size: 10px !important;
                cursor: pointer;
                margin-right: 5px;
            }

            > span.deny {
                background: @brand-danger;
            }

            > span:hover {
                opacity: 0.6;
                transition: @transition;
            }
        }
    }
}

.panel_rows {
    li {
        > a:hover {
            background: darken(@block-bg, 4%);
        }
    }
}

[dir="ltr"] {
    .panel_rows_image {
        left: 10px;
    }

    .panel_rows_content {
        margin-left: 70px;
        padding-right: 30px;
    }
}

[dir="rtl"] {
    .panel_rows_image {
        right: 10px;
    }

    .panel_rows_content {
        margin-right: 70px;
        padding-left: 30px;
    }
}
