@import '../../util/mixin.less';


.status-area {
    @barH: 26px;

    position: absolute;
    top: 30px;
    bottom: 0;
    right: 0;
    width: 50%;
    padding-top: @barH;

    border-left: 1px solid #ccc;
    background-color: #fff;

    .status-bar {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        height: @barH;
        font-size: 12px;

        .user-select();

        > ul {
            .flex();

            background: #ececec;
            border-bottom: 1px solid #ccc;

            height: @barH - 1;
            line-height: @barH - 1;
            text-align: center;

            li {
                position: relative;
                display: block;
                padding: 0 20px;
                border-right: 1px solid #717171;

                .single-line();
                cursor: pointer;

                &.active,
                &:hover {
                    background: #fff;
                }

                &.editing {
                    &::after {
                        position: absolute;
                        content: '*';
                        width: 20px;
                        height: 20px;
                        color: #f00;
                        text-align: center;
                    }
                }
            }
        }
    }

    .status-content {
        height: 100%;
        overflow-y: auto;
    }
}