[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;
  }
}
