main.wallets {
  --offset: 4rem;
  --content-width: 72rem;
  --control-height: 2.75rem;

  display: grid;
  gap: 1.5rem;
  align-content: start;
  width: min(100%, var(--content-width));
  margin-inline: auto;
  padding: var(--offset) var(--page-x);
  scroll-padding-top: var(--offset);

  &:is([data-wallets-page-empty], [data-wallets-page-locked]) {
    min-height: 100dvh;
    align-content: center;
  }

  [role="status"] {
    min-height: var(--line-height-sm);
    margin: 0;
    color: var(--gray);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
  }

  [data-wallets-btc-muted] {
    color: color-mix(in oklch, currentColor 45%, transparent);
  }

  :is(input, select, button) {
    min-width: 0;
    height: var(--control-height);
    border: 1px solid color-mix(in oklch, var(--gray) 45%, transparent);
    border-radius: 0.375rem;
    padding: 0 0.875rem;
    color: var(--white);
    background: color-mix(in oklch, var(--black) 72%, var(--white));
    font: inherit;
    line-height: 1;
  }

  button {
    cursor: pointer;
  }

  :is(input, select, button):focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
  }

  input::placeholder {
    color: color-mix(in oklch, var(--gray) 70%, transparent);
  }

  button:disabled {
    border-color: var(--gray);
    color: var(--black);
    background: var(--gray);
    cursor: progress;
  }
}