brk/website_next/wallets/wallet/receive/style.css

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