/* Pinned tools in the sidebar (assets/layout/pins.js) and the pin toggle in the Ctrl K palette (assets/layout/layout.js). */

.lay-row { position: relative; display: flex; align-items: center; min-width: 0; }
.lay-row > .lay-item { flex: 1; min-width: 0; padding-right: 30px; }
.lay-pin {
    position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
    display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 5px;
    background: none; color: var(--faint); cursor: pointer; opacity: 0;
}
.lay-pin .lay-i { width: 14px; height: 14px; }
.lay-pin:hover { background: var(--sel); color: var(--ink); }
.lay-row:hover .lay-pin, .lay-row:focus-within .lay-pin, .lay-pin:focus-visible { opacity: 1; }
.lay-pin[aria-pressed="true"] { color: var(--accent); }
.lay-pin[aria-pressed="true"] .lay-pin-head { fill: currentColor; }
.lay-pin:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* the Pinned group */
.lay-pins-list { display: grid; gap: 1px; }
.lay-pins .lay-row.is-dragging { opacity: .45; }
.lay-pins.is-sorting .lay-row:not(.is-dragging) .lay-pin { opacity: 0; }

/* touch screens and the phone drawer have no hover: the pins stay visible, quietly */
@media (hover: none), (max-width: 860px) {
    .lay-pin { opacity: .55; }
    .lay-pin[aria-pressed="true"] { opacity: 1; }
    .lay-pin { width: 32px; height: 32px; right: 0; }
    .lay-row > .lay-item { padding-right: 36px; }
}

/* the palette's pin toggle */
.lay-opt-pin {
    display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: 2px; padding: 0; border: 0; border-radius: 5px;
    background: none; color: var(--faint); cursor: pointer; flex: none; opacity: 0;
}
.lay-opt-pin .lay-i { width: 14px; height: 14px; }
.lay-opt.on .lay-opt-pin, .lay-opt:hover .lay-opt-pin, .lay-opt-pin[aria-pressed="true"] { opacity: 1; }
.lay-opt-pin:hover { background: var(--hover); color: var(--ink); }
.lay-opt-pin[aria-pressed="true"] { color: var(--accent); }
.lay-opt-pin[aria-pressed="true"] .lay-pin-head { fill: currentColor; }

.lay-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }