/* The picture button. It sits in the header row of a card, next to the
   controls that are already there, or in the corner of a card that has no
   header. It never lies over content. */
.sharebtn { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line-2); border-radius: var(--pill); background: var(--card); color: var(--dim); font-size: var(--t-small); font-weight: 500; white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: color .15s, border-color .15s, background .15s; }
/* A thumb needs more than 34 px. The target grows, the button does not. */
.sharebtn::after { content: ""; position: absolute; inset: -6px; }
.sharebtn svg { width: 17px; height: 17px; flex: none; }
.sharebtn.text { width: auto; padding: 0 13px 0 11px; }
.sharebtn:hover { color: var(--ink); border-color: var(--line-3); }
.sharebtn:active { background: var(--card-2); }
.sharebtn[data-state="busy"] { color: var(--faint); pointer-events: none; }
.sharebtn[data-state="done"] { color: var(--volt); border-color: var(--volt); }
.sharebtn[data-state="failed"] { color: var(--down); border-color: var(--down); }

/* Next to the large buttons of the token screen it takes their height. */
.dbar .sharebtn, .actions .sharebtn { height: 40px; min-width: 40px; }
.dbar .sharebtn:not(.text), .actions .sharebtn:not(.text) { width: 40px; }
.actions .sharebtn { height: 46px; min-width: 46px; }
.actions .sharebtn:not(.text) { width: 46px; }
.dbar .sharebtn svg, .actions .sharebtn svg { width: 18px; height: 18px; }
.dbar .sharebtn::after, .actions .sharebtn::after { inset: -3px; }

/* In the header row of a card, right after the title in the markup. The row
   keeps its height and the button comes last, after the controls. Where the
   controls of the market wrap on a phone, they go under the title and the
   button stays beside it. */
.sec h3 > .sharebtn, .fig > h4 > .sharebtn { order: 2; margin: -4px 0; }
.sec h3:has(> .sharebtn) > .ctl, .sec h3:has(> .sharebtn) > .seg, .fig > h4:has(> .sharebtn) > .ctl { order: 1; margin-left: auto; }
@container (max-width: 699px) {
  .sec h3:has(> .ctl) > .sharebtn, .fig > h4:has(> .ctl) > .sharebtn { order: 0; margin-left: auto; }
  .sec h3:has(> .sharebtn) > .ctl, .fig > h4:has(> .sharebtn) > .ctl { margin-left: 0; flex-basis: 100%; }
}

/* A card with no header: the card makes room on its first line, the button takes the corner. */
.sharehost { position: relative; }
.sharehost > .sharebtn { position: absolute; top: 12px; right: 12px; z-index: 3; }
.sharehost > :first-child:not(.sharebtn) { padding-right: 48px; }

@media (prefers-reduced-motion: reduce) { .sharebtn { transition: none; } }