/* Shared by Web Match, the hosted Library and dialogs appended to <body>.
   Keep the canonical Library's layout; own all button colours and states here.
   Its ID-based selectors are included so both New/Save entry points agree. */
:is(
  .wm-page button, a.wm-link-button,
  .library-frame button, .library-frame .web-match-return,
  .library-frame .component-link, .toolbar #new, #save, #new-from,
  #list button.active, #list .builtin-entry.active, #notice .quiet,
  .console-preparation-actions button, .console-preparation-actions a,
  .wm-guide-dialog button, .wm-forfeit-dialog button, .wm-library-opening button
):not(.wm-profile-open) {
  box-sizing: border-box;
  min-height: 44px;
  border: 2px solid var(--action-fill, #21435b);
  border-radius: 0;
  background: var(--action-fill, #21435b);
  color: var(--action-ink, #f5f6fb);
  box-shadow: 2px 3px 0 #07131f;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  filter: none;
  outline: none;
  cursor: pointer;
  transition: background-color 140ms ease-out, border-color 140ms ease-out;

  &:is(:hover, :focus-visible):not(:disabled, [aria-disabled=true]) {
    background: var(--action-hover, #315c77);
    border-color: var(--action-border, #9ce7e7);
    color: var(--action-ink, #f5f6fb);
    text-decoration: none;
    filter: none;
  }

  &:focus-visible {
    outline: 3px solid var(--action-border, #9ce7e7);
    outline-offset: 3px;
  }

  &:active:not(:disabled, [aria-disabled=true]) {
    transform: translate(1px, 1px);
    box-shadow: 1px 2px 0 #07131f;
  }

  &:is(:disabled, [aria-disabled=true]) {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }

  @media (prefers-reduced-motion: reduce) { transition: none; }
  @media (forced-colors: active) {
    border-color: ButtonText;
    box-shadow: none;
    &:focus-visible { outline-color: Highlight; }
    &:is([aria-current=page], [aria-pressed=true], .active, .selected) { border-color: Highlight; }
  }
}

/* Green actions always lighten to green with a pale green border. */
:where(.wm-page button, .wm-guide-dialog button, .wm-link-button, .library-frame .primary,
  .toolbar #new, #save, .console-apply, .wm-library-opening .primary) {
  --action-fill: #03c156;
  --action-hover: #27df76;
  --action-border: #9affbf;
  --action-ink: #fff;
}

/* Secondary actions have a solid blue fill, including Cancel and Back. */
:where(.wm-secondary, .wm-profile-cards button,
  .wm-code-keypad [data-code-key=backspace], .wm-code-keypad [data-code-key=clear]) {
  --action-fill: #21435b;
  --action-hover: #315c77;
  --action-border: #9ce7e7;
  --action-ink: #f5f6fb;
}

:where(.wm-danger, .library-frame .danger, .library-frame .trash) {
  --action-fill: #9c283d;
  --action-hover: #bd354d;
  --action-border: #ffb6c2;
  --action-ink: #fff;
}

/* Library navigation colours follow its existing headings. */
:where(.library-frame nav button) {
  --nav-fill: #00aafc;
  --nav-hover: #42c5ff;
  --nav-border: #b2ecff;
  --nav-ink: #fff;
  --action-border: var(--nav-border);
}
:is(.library-frame nav button) {
  position: relative;
  padding: 14px 20px 14px 28px;
  text-align: left;
}
:where(.library-frame nav [data-kind=level-set]) {
  --nav-fill: #03c156;
  --nav-hover: #27df76;
  --nav-border: #9affbf;
  --nav-ink: #fff;
}
:where(.library-frame nav [data-kind=setup]) {
  --nav-fill: #feca10;
  --nav-hover: #ffdc54;
  --nav-border: #fff0a6;
}
:where(.library-frame nav button)::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--nav-fill);
}
:where(.library-frame nav button.active) {
  --action-fill: var(--nav-fill);
  --action-hover: var(--nav-hover);
  --action-ink: var(--nav-ink, #fff);
}
:is(.library-frame nav button.active)::before {
  background: #07131f;
  width: 6px;
}

/* Selected choices remain filled when the pointer leaves. */
:where(#list button.active, .library-frame .choice.selected,
  .library-frame .world-toggle[aria-pressed=true],
  .wm-profile-cards button[aria-pressed=true],
  .wm-scroll-panel [data-guide=pause][data-scroll-state=paused]) {
  --action-fill: #feca10;
  --action-hover: #ffdc54;
  --action-border: #fff0a6;
  --action-ink: #fff;
}
:is(#list button, .library-frame .choice, .library-frame .copy-source,
  .wm-profile-cards button) :is(strong, span, small) { color: inherit; }
:is(#list button, .library-frame .choice, .library-frame .copy-source) small { opacity: .85; }
#list button:is(:hover, :focus-visible, .active) :is(strong, span, small) { color: inherit; }
.library-frame .choice.selected { padding: 16px; }
.library-frame .trash { padding: 7px; min-width: 44px; }
.library-frame .component-link { padding: 10px 14px; }
.library-frame :is(#new, #save, .primary) { padding: 12px 18px; font-size: 14px; }

@media (max-width: 650px) {
  .library-frame nav button {
    padding: 12px 10px 12px 16px;
    font-size: 12px;
    overflow-wrap: anywhere;
  }
}