/* Lessons 2.1 / 2.2 (demos/items.js, demos/view.js). Every class is prefixed icons-. */

/* insertion caret of a 手动 fence (draw_insert_caret): 2 DIP bar in the selection stroke colour */
.icons-caret {
    left: 0;
    top: 0;
    width: 2px;
    height: 80px;
    border-radius: 1px;
    background: color-mix(in srgb, var(--win-accent) 40%, transparent);
    opacity: 0;
}

/* drag image of a small selection: the selected icons as laid out on screen, no selection fill */
.icons-ghost {
    left: 0;
    top: 0;
    opacity: .72;
    pointer-events: none;
}

.icons-ghost .ico span { text-shadow: none }

/* 64 px icons (较大图标): cell = icon + 32 wide, one 16 px step taller, same label font */
.ico.icons-s64 { width: 93.6px; height: 93.3px }
.ico.icons-s64 img { left: 20.3px; top: 4px; width: 53px; height: 53px }
.ico.icons-s64 span { top: 60px }

/* menu extras: check marks in a left gutter (MF_CHECKED) and greyed items (MF_GRAYED) */
.menu.icons-checks .menu-item { padding-left: 30px }

.icons-check {
    position: absolute !important;
    left: 10px;
    top: 0;
    width: 12px;
    height: 26px;
}

.icons-check svg { position: absolute; left: 0; top: 7px; width: 12px; height: 12px }

.menu-item.icons-off { color: rgba(0, 0, 0, .36) }
.menu-item.icons-off .menu-key { color: rgba(0, 0, 0, .3) }

/* icon grid / details layers in the fence body; details: fixed header (secondary captions,
   dividers, hairline, sort chevron) over the rows */
.icons-layer {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.icons-dhead {
    left: 0;
    right: 0;
    top: 0;
    height: 24px;
    box-shadow: inset 0 -1px 0 rgba(27, 33, 51, .14);
}

.icons-dcap {
    top: 0;
    font-size: 11.5px;
    line-height: 24px;
    color: rgba(27, 33, 51, .6);
    white-space: nowrap;
}

.icons-dcap.r { text-align: right }

.icons-ddiv {
    top: 5px;
    width: 1px;
    height: 14px;
    background: rgba(27, 33, 51, .14);
}

.icons-dsort {
    top: 0;
    width: 12px;
    height: 8px;
    color: rgba(27, 33, 51, .6);
}

.icons-dsort svg { position: absolute; left: 2px; top: 1px; width: 8px; height: 5px }

.icons-drow {
    left: 0;
    right: 0;
    height: 24px;
}

.icons-drow img {
    left: 8px;
    top: 3px;
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.icons-drow span {
    top: 0;
    font-size: 11.5px;
    line-height: 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.icons-drow .n { font-size: 12px; color: #1b2133 }
.icons-drow .s { color: rgba(27, 33, 51, .6) }
.icons-drow .r { text-align: right }