/* SPDX-License-Identifier: Apache-2.0 */
/* The Classes panel (0.8 SU.912, classes-ui.js): over the drawing's top right like the Laser panel; the drawing stays live. */
.cc-classpanel { position: absolute; top: .5rem; right: .5rem; z-index: 6; width: min(26rem, calc(100% - 1rem)); max-height: calc(100% - 1rem); overflow: auto;
  background: var(--sheet); color: var(--ink); border: var(--pen-1) solid var(--line); border-radius: var(--radius); padding: .5rem .65rem .6rem; font-size: .875rem; }
.cc-classpanel[hidden] { display: none; }
.cc-classpanel .cc-align-head .cc-h { margin: 0; }
.cc-classpanel h3 { font-size: .8125rem; font-weight: 700; margin: .6rem 0 .3rem; }
.cc-classpanel .cc-note { font-size: .8125rem; margin: .3rem 0; color: var(--ink-2); }
.cc-cls-new { display: flex; gap: .35rem; margin: .4rem 0; }
.cc-cls-new .cc-input { flex: 1 1 auto; min-width: 0; }
.cc-classpanel .btn-sm-cc { white-space: nowrap; }
.cc-cls-tree { list-style: none; margin: 0; padding: 0; max-height: 16rem; overflow: auto; }
.cc-cls-tree li { display: grid; grid-template-columns: 1.4rem 1.1rem .9rem minmax(0, 1fr) auto; align-items: center; gap: .35rem;
  padding: .15rem 0 .15rem calc(var(--d, 0) * .9rem); border-top: var(--pen-1) solid var(--grid); }
.cc-cls-tree li:first-child { border-top: 0; }
.cc-cls-tree li.is-off .cc-cls-name { color: var(--ink-2); text-decoration: line-through; }
.cc-cls-tree li.is-active .cc-cls-name { font-weight: 700; }
.cc-cls-eye { border: 0; background: none; color: inherit; padding: 0; cursor: pointer; line-height: 1; }
.cc-cls-sw { width: .8rem; height: .8rem; border: var(--pen-1) solid var(--ink); border-radius: var(--radius); }
.cc-cls-sw.is-none { background: repeating-linear-gradient(45deg, transparent 0 2px, var(--grid) 2px 4px); }
.cc-cls-name { border: 0; background: none; color: inherit; padding: .1rem .2rem; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; border-radius: var(--radius); }
.cc-cls-name.is-picked { outline: var(--pen-1) solid var(--action); }
.cc-cls-n { color: var(--ink-2); font-size: .75rem; }
.cc-cls-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: .4rem 0; }
.cc-cls-check { display: inline-flex; align-items: center; gap: .3rem; }
.cc-cls-attrs, .cc-cls-vp, .cc-cls-design { margin-top: .5rem; padding-top: .4rem; border-top: var(--pen-1) solid var(--grid); }
.cc-cls-f { display: grid; grid-template-columns: minmax(0, 1fr) 9rem; align-items: center; gap: .4rem; margin: .2rem 0; }
.cc-cls-f input[type="color"] { width: 100%; height: 1.6rem; padding: 0; border: var(--pen-1) solid var(--line); background: none; }
.cc-cls-vplist { margin: .3rem 0; padding-left: 1rem; }
.cc-cls-design summary { cursor: pointer; font-weight: 700; font-size: .8125rem; }
.cc-cls-design .cc-input { width: 6rem; }
html.cc-phone .cc-classpanel { top: auto; bottom: .5rem; max-height: 70%; }