[data-block-preview] { display: grid; min-width: 0; [data-block-preview-figure] { position: relative; display: grid; gap: 0.75rem; min-width: 0; } [data-block-preview-legend] { display: grid; gap: 0.5rem; min-width: 0; } [data-block-preview-transaction] { position: absolute; top: var(--tx-y, 50%); left: var(--tx-x, 50%); z-index: 2; display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 0.5rem; width: min(24rem, calc(100% - 1rem)); padding: 0.375rem 0.5rem; border-radius: var(--control-radius); color: var(--gray); background: color-mix(in oklch, var(--black) 88%, transparent); backdrop-filter: blur(0.25rem); font-size: var(--font-size-xs); font-weight: var(--font-weight-regular); line-height: var(--line-height-xs); pointer-events: none; transform: translate(-50%, calc(-100% - 0.5rem)); &[data-below] { transform: translate(-50%, 0.5rem); } > div { display: contents; } dt, dd { min-width: 0; } dt { color: var(--gray); text-transform: uppercase; } dd { overflow: hidden; margin: 0; color: var(--white); text-overflow: ellipsis; white-space: nowrap; &[aria-busy="true"] { color: var(--gray); font-style: italic; } } } [data-block-preview-status] { display: grid; aspect-ratio: 1; margin: 0; place-items: center; color: var(--gray); font-size: var(--font-size-sm); line-height: var(--line-height-sm); text-transform: uppercase; } }