1/* The name of a control arrives only once the pointer has settled on it, so a2 legend of icons stays learnable without the words being present all the time.3 It opens to the left because the list beside it scrolls and would clip4 anything that reached past its edge. */5[data-label] {6 position: relative;7}89[data-label]::after {10 position: absolute;11 z-index: 12;12 top: 50%;13 right: calc(100% + 6px);14 padding: 4px 7px;15 border: 1px solid var(--line-strong);16 border-radius: 4px;17 opacity: 0;18 background: rgba(15, 16, 20, 0.97);19 box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);20 color: var(--text);21 content: attr(data-label);22 font-size: 10px;23 font-weight: 600;24 letter-spacing: 0;25 text-transform: none;26 transform: translateY(-50%);27 transition: opacity 90ms ease;28 pointer-events: none;29 white-space: nowrap;30}3132[data-label]:hover::after,33[data-label]:focus-visible::after {34 opacity: 1;35 transition-delay: 520ms;36}37