#block-details section[data-group="block"] { --section-color: var(--cyan); [data-block-box] { display: grid; gap: 0.5rem; min-width: 0; border: 1px solid color-mix(in oklch, var(--section-color) 35%, transparent); border-radius: 0.25rem; padding: 0.75rem; &[data-block-box="tx"] { border-color: color-mix(in oklch, var(--orange) 35%, transparent); } &[data-block-box="input"] { border-color: color-mix(in oklch, var(--yellow) 55%, transparent); } &[data-block-box="output"] { border-color: color-mix(in oklch, var(--red) 55%, transparent); } } [data-block-row] { display: grid; grid-template-columns: minmax(4.5rem, auto) minmax(0, 1fr); gap: 0.75rem; align-items: center; min-width: 0; > span { color: var(--section-color); font-size: var(--font-size-xs); line-height: var(--line-height-xs); text-transform: uppercase; } strong { display: flex; gap: 0.5rem; align-items: center; justify-content: flex-end; min-width: 0; color: var(--section-color); font-size: var(--font-size-sm); font-weight: var(--font-weight-strong); line-height: var(--line-height-sm); text-align: right; } } [data-block-io] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.75rem; min-width: 0; [data-block-box] { align-content: center; padding: 0.5rem; } [data-block-row] { grid-template-columns: auto auto; justify-content: space-between; gap: 0.5rem; width: 100%; } } [data-block-box="tx"] > [data-block-row] { > span, strong { color: var(--orange); } } :is([data-block-box="input"], [data-block-box="output"]) > [data-block-row] { > span, strong { color: var(--block-box-color); } } [data-block-box="input"] { --block-box-color: var(--yellow); } [data-block-box="output"] { --block-box-color: var(--red); } }