main.wallets {
  .selector {
    min-width: 0;

    > nav {
      display: flex;
      gap: 0.5rem;
      min-width: 0;
      overflow-x: auto;
      padding-bottom: 0.25rem;
      overscroll-behavior-inline: contain;
      scroll-padding-inline: var(--page-x);
      scroll-snap-type: x proximity;

      > button {
        flex: 0 0 auto;
        scroll-snap-align: center;
        background: var(--gray);
        color: var(--white);
        font-size: var(--font-size-lg);
        font-weight: 400;
        line-height: 1;

        @media (max-width: 56rem) {
          font-size: var(--font-size-base);
        }

        @media (hover: hover) and (pointer: fine) {
          &:hover {
            color: var(--black);
            background: var(--white);
          }
        }

        &:active {
          color: var(--black);
          background: var(--orange);
        }

        &[data-press] {
          color: var(--black);
          background: var(--white);
        }

        &[aria-pressed="true"] {
          color: var(--black);
          background: var(--white);
        }

        &.delete {
          color: color-mix(in oklch, var(--gray) 76%, transparent);
          background: transparent;

          @media (hover: hover) and (pointer: fine) {
            &:hover {
              color: var(--red);
              background: transparent;
            }
          }

          &:active {
            color: var(--red);
            background: transparent;
          }

          &[data-press] {
            color: var(--red);
            background: transparent;
          }
        }
      }
    }
  }
}