main[data-page="wallets"] { dialog[data-wallet="receive"] { --dialog-space: 1rem; width: min(100% - 2rem, 10rem); border-radius: 0.125rem; > article { position: relative; display: grid; gap: 0.375rem; cursor: pointer; &:focus-visible { outline: 2px solid var(--orange); outline-offset: 0.25rem; } &::after { content: "Copied"; position: absolute; top: 50%; left: 50%; color: var(--black); font-size: var(--font-size-sm); opacity: 0; pointer-events: none; translate: -50% calc(-50% + 0.25rem); transition: opacity 150ms ease, translate 150ms ease; text-transform: uppercase; } &[data-copied]::after { opacity: 1; translate: -50% -50%; } &[data-copied] > * { opacity: 0.1; } > img { justify-self: center; width: 100%; aspect-ratio: 1; background: var(--white); image-rendering: pixelated; } > img, > p { transition: opacity 150ms ease; } > p { margin: 0; font-size: var(--font-size-xs); font-style: italic; line-height: var(--line-height-xs); [data-wallet="address"] { max-width: 100%; gap: 0 0.25rem; > span { color: var(--black); > var { color: color-mix(in oklch, var(--black) 75%, var(--gray)); } } } } } } }