// glyf列表样式
.glyf-list {
    height: 100%;
    overflow: auto;

    >.glyf-item {

        float: left;
        position: relative;
        margin: 10px;
        width: 80px;
        box-shadow: 1px 1px 4px #999;
        cursor: pointer;
        background: #ECECEC;

        .unicode,
        .name {
            font-size: 12px;
            line-height: 20px;
            height: 20px;
            padding-left: 4px;
            color: #45283F;
            .ellipsis();
        }

        .unicode {
            color: #70A9D6;
        }

        .glyf {
            width: 80px;
            height: 80px;
            border: 3px solid #FFF;
            background: #FFF;
            box-sizing: border-box;
            display: block;
            .path {
                fill: #666;
            }
        }

        .i-del,
        .i-edit {
            position: absolute;
            right: 4px;
            padding: 0 2px;
            display: none;
        }

        .i-edit {
            right: 20px;
        }
    }

    >.glyf-item:hover,
    >.selected {
        .glyf {
            border-color: #232830;
        }
        .name {
            color: #FFF;
        }
    }

    >.glyf-item:hover {
        background: #3C619B;

        .name {
            color: #FFF;
        }
        .i-del {
            display: block;
        }
        .i-edit {
            display: block;
        }
    }

    >.selected,
    >.selected:hover {
        background: #232830;
    }

    >.editing,
    >.editing:hover {
        .glyf {
            border-color: #066BC5;
        }
    }

    >.compound {
        .path {
            fill: lighten(green, 50%) !important;
        }
    }

    >.new,
    >.edit {
        .path {
            fill: blue!important;
        }
    }
}

.glyf-list {

    &.xlarge {
        >.glyf-item {
            width: 160px;
            .glyf {
                width: 160px;
                height: 160px;
            }
        }
    }

    &.large {
        >.glyf-item {
            width: 120px;
            .glyf {
                width: 120px;
                height: 120px;
            }
        }
    }

    &.small {
        >.glyf-item {
            width: 60px;
            .glyf {
                width: 60px;
                height: 60px;
            }
        }
    }
}

.glyf-list.no-hover {
  .glyf-item {
    pointer-events: none;
  }
}

// 选择范围矩形
.selection-range {
    position: absolute;
    z-index: 6;
    display: none;
    border: 1px solid #CCC;
    background: rgba(222, 222, 222, 0.5);
    pointer-events: none;
}