/* Flat button finish. Match design on Flat, and a user choice with any other design.
   Gated on the finish attribute only, so it can sit on any design.
   Rest is tonal or transparent with a 1px edge. Hover shifts the fill 12%.
   Pressed, open and current are a tint plus a 2px bar inside the bottom edge.
   Focus is a 2px ring 2px outside. Primary is a solid fill, inverted inside a colour block.
   Default, Glass, Raised and Soft UI are not selected by this sheet. */

@media screen and (forced-colors: none) {
/* 2.10 Buttons: the Flat finish (button style "flat", what match-design resolves to).
   Glass, Raised and Soft UI stay available and keep their own finish. surux.buttons.css
   sets border, radius, background and shadow with !important, so the paint rule must too.
   Variables are set through :where() so tone and context rules below can win by one class. */
:is(html, [data-surux-preference-preview])[data-surux-button-style="flat"]:not([data-surux-contrast="high"]) :where(.btn:not(.btn-close):not(:where(.surux-toast-button, .surux-picker-action)), .surux-button, .surux-command-button, .surux-command-overflow-trigger, .surux-search-submit-btn, .surux-icon-btn, .surux-address-tool, .surux-address-clear, .surux-page-all, .surux-sidebar-close) {
  --surux-button-radius: var(--surux-radius-control);
  --surux-button-bg: transparent;
  --surux-button-fg: var(--surux-text);
  --surux-button-border: var(--surux-flat-edge, color-mix(in srgb, var(--surux-text) 58%, var(--surux-surface, var(--surux-surface-base))));
  --surux-button-icon-bg: transparent;
  --surux-button-icon-border: transparent;
  --surux-button-icon-fg: currentColor;
}
/* Colour-block: solid tonal blocks, no border. The fill is read from --surux-flat-button-block,
   which surfaces set for the buttons they hold (see the colour-block tokens): a tonal button
   on a tonal surface, or on Light's tinted plane, would vanish. */
:is(html, [data-surux-preference-preview])[data-surux-button-style="flat"][data-surux-colour-style="vivid"]:not([data-surux-contrast="high"]) :where(.btn:not(.btn-close):not(:where(.surux-toast-button, .surux-picker-action)), .surux-button, .surux-command-button, .surux-command-overflow-trigger, .surux-search-submit-btn, .surux-icon-btn, .surux-address-tool, .surux-address-clear, .surux-page-all, .surux-sidebar-close) {
  --surux-button-bg: var(--surux-flat-button-block, transparent);
  --surux-button-border: transparent;
}
/* Minimal: every button, icon-only ones included, keeps the 3:1 edge from the base rule above.
   (Round 1 made icon-only buttons frameless ghosts; with no fill either, nothing marked them as
   controls.) A trailing action inside a field frame (the search submit) is bounded by the
   frame, so it stays bare: a box inside a box would read as a second field. */
:is(html, [data-surux-preference-preview])[data-surux-button-style="flat"]:not([data-surux-contrast="high"]) :where(.surux-field-surface, .surux-picker-surface, .surux-search-input-box) :where(.btn:not(.btn-close), .surux-button, .surux-command-button, .surux-search-submit-btn, .surux-icon-btn) {
  --surux-button-border: transparent;
  --surux-button-bg: transparent;
}
/* The primary action is the accent fill in both moods. */
:is(html, [data-surux-preference-preview])[data-surux-button-style="flat"]:not([data-surux-contrast="high"]) :where(.btn:not(.btn-close):not(:where(.surux-toast-button, .surux-picker-action)), .surux-button, .surux-command-button, .surux-command-overflow-trigger, .surux-search-submit-btn, .surux-icon-btn, .surux-address-tool, .surux-address-clear, .surux-page-all, .surux-sidebar-close):is(.surux-button-tone-action, .btn-primary) {
  --surux-button-bg: var(--surux-primary-action-bg);
  --surux-button-fg: var(--surux-primary-contrast);
  --surux-button-border: var(--surux-primary-action-bg);
}
/* Secondary (dismiss): minimal keeps the edge and letters in muted ink; colour-block keeps the
   tonal block. */
:is(html, [data-surux-preference-preview])[data-surux-button-style="flat"]:not([data-surux-colour-style="vivid"]):not([data-surux-contrast="high"]) :where(.btn:not(.btn-close):not(:where(.surux-toast-button, .surux-picker-action)), .surux-button, .surux-command-button, .surux-command-overflow-trigger, .surux-search-submit-btn, .surux-icon-btn, .surux-address-tool, .surux-address-clear, .surux-page-all, .surux-sidebar-close).surux-button-tone-secondary {
  --surux-button-bg: transparent;
  --surux-button-fg: var(--surux-muted);
}
/* Workflow, warning and destructive tones keep their colour as ink and edge. */
:is(html, [data-surux-preference-preview])[data-surux-button-style="flat"]:not([data-surux-contrast="high"]) :where(.btn:not(.btn-close):not(:where(.surux-toast-button, .surux-picker-action)), .surux-button, .surux-command-button, .surux-command-overflow-trigger, .surux-search-submit-btn, .surux-icon-btn, .surux-address-tool, .surux-address-clear, .surux-page-all, .surux-sidebar-close).surux-button-tone-submitted {
  --surux-button-bg: transparent;
  --surux-button-fg: var(--surux-workflow-submitted-color);
  --surux-button-border: var(--surux-workflow-submitted-border);
}
:is(html, [data-surux-preference-preview])[data-surux-button-style="flat"]:not([data-surux-contrast="high"]) :where(.btn:not(.btn-close):not(:where(.surux-toast-button, .surux-picker-action)), .surux-button, .surux-command-button, .surux-command-overflow-trigger, .surux-search-submit-btn, .surux-icon-btn, .surux-address-tool, .surux-address-clear, .surux-page-all, .surux-sidebar-close).surux-button-tone-approved {
  --surux-button-bg: transparent;
  --surux-button-fg: var(--surux-workflow-approved-color);
  --surux-button-border: var(--surux-workflow-approved-border);
}
:is(html, [data-surux-preference-preview])[data-surux-button-style="flat"]:not([data-surux-contrast="high"]) :where(.btn:not(.btn-close):not(:where(.surux-toast-button, .surux-picker-action)), .surux-button, .surux-command-button, .surux-command-overflow-trigger, .surux-search-submit-btn, .surux-icon-btn, .surux-address-tool, .surux-address-clear, .surux-page-all, .surux-sidebar-close).surux-button-tone-paid {
  --surux-button-bg: transparent;
  --surux-button-fg: var(--surux-workflow-paid-color);
  --surux-button-border: var(--surux-workflow-paid-border);
}
:is(html, [data-surux-preference-preview])[data-surux-button-style="flat"]:not([data-surux-contrast="high"]) :where(.btn:not(.btn-close):not(:where(.surux-toast-button, .surux-picker-action)), .surux-button, .surux-command-button, .surux-command-overflow-trigger, .surux-search-submit-btn, .surux-icon-btn, .surux-address-tool, .surux-address-clear, .surux-page-all, .surux-sidebar-close).surux-button-tone-rejected {
  --surux-button-bg: transparent;
  --surux-button-fg: var(--surux-workflow-rejected-color);
  --surux-button-border: var(--surux-workflow-rejected-border);
}
:is(html, [data-surux-preference-preview])[data-surux-button-style="flat"]:not([data-surux-contrast="high"]) :where(.btn:not(.btn-close):not(:where(.surux-toast-button, .surux-picker-action)), .surux-button, .surux-command-button, .surux-command-overflow-trigger, .surux-search-submit-btn, .surux-icon-btn, .surux-address-tool, .surux-address-clear, .surux-page-all, .surux-sidebar-close).surux-button-tone-warning {
  --surux-button-bg: transparent;
  --surux-button-fg: var(--surux-warning);
  --surux-button-border: var(--surux-warning);
}
:is(html, [data-surux-preference-preview])[data-surux-button-style="flat"]:not([data-surux-contrast="high"]) :where(.btn:not(.btn-close):not(:where(.surux-toast-button, .surux-picker-action)), .surux-button, .surux-command-button, .surux-command-overflow-trigger, .surux-search-submit-btn, .surux-icon-btn, .surux-address-tool, .surux-address-clear, .surux-page-all, .surux-sidebar-close):is(.surux-button-tone-destructive, .btn-danger) {
  --surux-button-bg: transparent;
  --surux-button-fg: var(--surux-danger);
  --surux-button-border: var(--surux-danger);
}
/* Inside a colour block (vivid header band, vivid hero) buttons that sit on the fill take the
   block's ink: a tonal square of on-fill ink. Buttons inside the block's floating layers
   (helper panel, overflow, menus) sit on the plane and keep the plane finish. The primary
   action inverts (on-fill block, fill-coloured ink) so it still leads inside the fill. */
:is(html, [data-surux-preference-preview])[data-surux-button-style="flat"][data-surux-colour-style="vivid"]:not([data-surux-contrast="high"]) :is(.surux-header-band, .surux-page-hero) :where(.btn:not(.btn-close):not(:where(.surux-toast-button, .surux-picker-action)), .surux-button, .surux-command-button, .surux-command-overflow-trigger, .surux-search-submit-btn, .surux-icon-btn, .surux-address-tool, .surux-address-clear, .surux-page-all, .surux-sidebar-close):not(:where(.surux-command-overflow-panel, .dropdown-menu, .popover, [popover]) *) {
  --surux-button-bg: color-mix(in srgb, var(--surux-flat-on-fill, var(--surux-primary-contrast)) 14%, transparent);
  --surux-button-fg: var(--surux-flat-on-fill, var(--surux-primary-contrast));
  --surux-button-border: transparent;
}
:is(html, [data-surux-preference-preview])[data-surux-button-style="flat"][data-surux-colour-style="vivid"]:not([data-surux-contrast="high"]) :is(.surux-header-band, .surux-page-hero) :where(.btn:not(.btn-close):not(:where(.surux-toast-button, .surux-picker-action)), .surux-button, .surux-command-button, .surux-command-overflow-trigger, .surux-search-submit-btn, .surux-icon-btn, .surux-address-tool, .surux-address-clear, .surux-page-all, .surux-sidebar-close):is(.surux-button-tone-action, .btn-primary):not(:where(.surux-command-overflow-panel, .dropdown-menu, .popover, [popover]) *) {
  /* !important: surux.palette-controls.css declares the action fill, ink and icon ink with
     !important (html[data-surux-theme] :is(.surux-button-tone-action, .primary-button)). */
  --surux-button-bg: var(--surux-flat-on-fill, var(--surux-primary-contrast)) !important;
  --surux-button-fg: var(--surux-flat-fill, var(--surux-primary-action-bg)) !important;
  --surux-button-icon-fg: var(--surux-flat-fill, var(--surux-primary-action-bg)) !important;
  --surux-button-border: var(--surux-flat-on-fill, var(--surux-primary-contrast)) !important;
}

/* Paint. */
:is(html, [data-surux-preference-preview])[data-surux-button-style="flat"]:not([data-surux-contrast="high"]) :is(.btn:not(.btn-close):not(:where(.surux-toast-button, .surux-picker-action)), .surux-button, .surux-command-button, .surux-command-overflow-trigger, .surux-search-submit-btn, .surux-icon-btn, .surux-address-tool, .surux-address-clear, .surux-page-all, .surux-sidebar-close) {
  border-radius: var(--surux-radius-control) !important;
  background: var(--surux-button-bg) !important;
  border-color: var(--surux-button-border) !important;
  color: var(--surux-button-fg) !important;
  box-shadow: none !important;
  filter: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: none;
}
:is(html, [data-surux-preference-preview])[data-surux-button-style="flat"]:not([data-surux-contrast="high"]) :is(.btn:not(.btn-close):not(:where(.surux-toast-button, .surux-picker-action)), .surux-button, .surux-command-button, .surux-command-overflow-trigger, .surux-search-submit-btn, .surux-icon-btn, .surux-address-tool, .surux-address-clear, .surux-page-all, .surux-sidebar-close)::before,
:is(html, [data-surux-preference-preview])[data-surux-button-style="flat"]:not([data-surux-contrast="high"]) :is(.btn:not(.btn-close):not(:where(.surux-toast-button, .surux-picker-action)), .surux-button, .surux-command-button, .surux-command-overflow-trigger, .surux-search-submit-btn, .surux-icon-btn, .surux-address-tool, .surux-address-clear, .surux-page-all, .surux-sidebar-close):not(.dropdown-toggle)::after {
  content: none;
}
:is(html, [data-surux-preference-preview])[data-surux-button-style="flat"]:not([data-surux-contrast="high"]) .surux-command-button-icon {
  width: auto !important;
  height: auto !important;
  flex: 0 0 auto !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Hero tools carry their own !important frame (surux.hero.css); square it and drop the rim. */
:is(html, [data-surux-preference-preview])[data-surux-button-style="flat"]:not([data-surux-contrast="high"]) .surux-page-hero-halo.surux-page-hero-content :is(.surux-page-hero-tools .btn.surux-button.surux-command-button, .surux-hero-action-flyout > .btn.surux-button.surux-command-overflow-trigger) {
  border-radius: var(--surux-radius-control) !important;
  border-color: var(--surux-button-border) !important;
  background: var(--surux-button-bg) !important;
  color: var(--surux-button-fg) !important;
  box-shadow: none !important;
}
/* Three states, three different marks, so none reads as another:
     hover / active press   a colour shift of the button's own fill (never lift);
     pressed / expanded /   the accent tint plus a 2px accent bar on the bottom edge, inside
       current               the button (the active-tab mark);
     keyboard focus         a 2px ring outside the button, 2px clear of it.
   Primary is a solid fill. None of the three uses a border-coloured frame. */
:is(html, [data-surux-preference-preview])[data-surux-button-style="flat"]:not([data-surux-contrast="high"]) :is(.btn:not(.btn-close):not(:where(.surux-toast-button, .surux-picker-action)), .surux-button, .surux-command-button, .surux-command-overflow-trigger, .surux-search-submit-btn, .surux-icon-btn, .surux-address-tool, .surux-address-clear, .surux-page-all, .surux-sidebar-close):is(:hover, :active) {
  background: color-mix(in srgb, var(--surux-button-bg), var(--surux-button-fg) 12%) !important;
  transform: none !important;
  box-shadow: none !important;
  filter: none;
}
:is(html, [data-surux-preference-preview])[data-surux-button-style="flat"]:not([data-surux-contrast="high"]) :is(.btn:not(.btn-close):not(:where(.surux-toast-button, .surux-picker-action)), .surux-button, .surux-command-button, .surux-command-overflow-trigger, .surux-search-submit-btn, .surux-icon-btn, .surux-address-tool, .surux-address-clear, .surux-page-all, .surux-sidebar-close):is([aria-pressed="true"], [aria-expanded="true"], [aria-current="page"], .active):not(:is(.surux-button-tone-action, .btn-primary)) {
  background: var(--surux-flat-pressed, color-mix(in srgb, var(--surux-primary) 18%, transparent)) !important;
  box-shadow: inset 0 calc(-1 * var(--surux-border-width-strong)) 0 var(--surux-flat-bar, var(--surux-primary)) !important;
  transform: none !important;
  filter: none;
}
:is(html, [data-surux-preference-preview])[data-surux-button-style="flat"]:not([data-surux-contrast="high"]) :is(.btn:not(.btn-close):not(:where(.surux-toast-button, .surux-picker-action)), .surux-button, .surux-command-button, .surux-command-overflow-trigger, .surux-search-submit-btn, .surux-icon-btn, .surux-address-tool, .surux-address-clear, .surux-page-all, .surux-sidebar-close):focus-visible {
  outline: 2px solid var(--surux-flat-focus, var(--surux-primary)) !important;
  outline-offset: 2px !important;
  transform: none !important;
}

/* Icon-only subtle paints a 999px disc with a longer selector and !important. These three
   families are square in Flat. Search and refresh sit inside the field: bare in minimal,
   with the hairline only while hovered, and the tonal block in colour-block. */
:is(html, [data-surux-preference-preview])[data-surux-button-style="flat"]:not([data-surux-contrast="high"]) :is(
  .surux-search-submit-inline.surux-command-button,
  .surux-search-input-box .surux-toolbar-search-actions > .surux-command-button[type="submit"],
  .surux-search-input-box .surux-toolbar-refresh.surux-command-button,
  .surux-search-input-box .surux-list-density-menu > .surux-command-overflow-trigger,
  .surux-search-input-box .surux-toolbar-filter-toggle.surux-command-button.surux-command-button-icon-only
) {
  border-radius: var(--surux-radius-control) !important;
  border-color: transparent !important;
  background: transparent !important;
  color: var(--surux-text) !important;
  box-shadow: none !important;
  transform: none !important;
}
:is(html, [data-surux-preference-preview])[data-surux-button-style="flat"][data-surux-colour-style="vivid"]:not([data-surux-contrast="high"]) :is(
  .surux-search-submit-inline.surux-command-button,
  .surux-search-input-box .surux-toolbar-search-actions > .surux-command-button[type="submit"],
  .surux-search-input-box .surux-toolbar-refresh.surux-command-button,
  .surux-search-input-box .surux-list-density-menu > .surux-command-overflow-trigger,
  .surux-search-input-box .surux-toolbar-filter-toggle.surux-command-button.surux-command-button-icon-only
) {
  background: var(--surux-flat-button-block, transparent) !important;
  border-color: transparent !important;
  color: var(--surux-text) !important;
}
:is(html, [data-surux-preference-preview])[data-surux-button-style="flat"]:not([data-surux-colour-style="vivid"]):not([data-surux-contrast="high"]) :is(
  .surux-search-submit-inline.surux-command-button,
  .surux-search-input-box .surux-toolbar-search-actions > .surux-command-button[type="submit"],
  .surux-search-input-box .surux-toolbar-refresh.surux-command-button,
  .surux-search-input-box .surux-list-density-menu > .surux-command-overflow-trigger,
  .surux-search-input-box .surux-toolbar-filter-toggle.surux-command-button.surux-command-button-icon-only
):is(:hover, :focus-visible, :active) {
  border-color: var(--surux-flat-hairline, var(--surux-border)) !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
:is(html, [data-surux-preference-preview])[data-surux-button-style="flat"][data-surux-colour-style="vivid"]:not([data-surux-contrast="high"]) :is(
  .surux-search-submit-inline.surux-command-button,
  .surux-search-input-box .surux-toolbar-search-actions > .surux-command-button[type="submit"],
  .surux-search-input-box .surux-toolbar-refresh.surux-command-button,
  .surux-search-input-box .surux-list-density-menu > .surux-command-overflow-trigger,
  .surux-search-input-box .surux-toolbar-filter-toggle.surux-command-button.surux-command-button-icon-only
):is(:hover, :focus-visible, :active) {
  background: color-mix(in srgb, var(--surux-flat-button-block, transparent), var(--surux-text) 12%) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Open filters retain the finish's tint/bar after both mood hover rules.
   (0,9,0), versus the preceding vivid field-hover rule (0,9,0):
   later in this sheet, after surux.buttons.css. Density menus keep their field finish. */
:is(html, [data-surux-preference-preview])[data-surux-button-style="flat"]:not([data-surux-contrast="high"]) .surux-search-input-box .surux-toolbar-filter-toggle.surux-command-button.surux-command-button-icon-only:is([aria-pressed="true"], [aria-expanded="true"], .active):not(:is(.surux-button-tone-action, .btn-primary)) {
  background: var(--surux-flat-pressed, color-mix(in srgb, var(--surux-primary) 18%, transparent)) !important;
  box-shadow: inset 0 calc(-1 * var(--surux-border-width-strong)) 0 var(--surux-flat-bar, var(--surux-primary)) !important;
}
:is(html, [data-surux-preference-preview])[data-surux-button-style="flat"]:not([data-surux-contrast="high"]) .surux-search-input-box .surux-toolbar-filter-toggle.surux-command-button.surux-command-button-icon-only :is(.surux-command-button-icon, .surux-command-button-icon i) {
  color: inherit !important;
}
/* Standard IconOnlyToggle sits on the Flat tint, including outside command bars. Glass
   retains the shared accent fill and its primary-contrast ink. */
:is(html, [data-surux-preference-preview])[data-surux-button-style="flat"]:not([data-surux-contrast="high"]) .btn.surux-button.surux-command-button.surux-command-button-icon-only.surux-command-button-icon-only-toggle:is([aria-pressed="true"], .surux-button-pressed):not(:is(.surux-button-tone-action, .btn-primary)) {
  /* (0,9,0) beats Light's pressed ink token (0,4,0) in
     surux.buttons.css, loaded before this finish owner. */
  --surux-button-fg: var(--surux-text);
  background: var(--surux-flat-pressed, color-mix(in srgb, var(--surux-primary) 18%, transparent)) !important;
  color: var(--surux-button-fg) !important;
  box-shadow: inset 0 calc(-1 * var(--surux-border-width-strong)) 0 var(--surux-flat-bar, var(--surux-primary)) !important;
  transform: none !important;
}
:is(html, [data-surux-preference-preview])[data-surux-button-style="flat"]:not([data-surux-contrast="high"]) .btn.surux-button.surux-command-button.surux-command-button-icon-only.surux-command-button-icon-only-toggle:is([aria-pressed="true"], .surux-button-pressed):not(:is(.surux-button-tone-action, .btn-primary)) :is(.surux-command-button-icon, .surux-command-button-icon i) {
  color: var(--surux-button-fg) !important;
}

/* Pager steps are square. Colour-block fills the enabled next step with the primary block. */
:is(html, [data-surux-preference-preview])[data-surux-button-style="flat"]:not([data-surux-contrast="high"]) .surux-list-pager > .surux-button.surux-command-button.surux-command-button-icon-only {
  border-radius: var(--surux-radius-control) !important;
}
:is(html, [data-surux-preference-preview])[data-surux-button-style="flat"][data-surux-colour-style="vivid"]:not([data-surux-contrast="high"]) .surux-list-pager > .surux-command-button[aria-label="Next page"]:not(:disabled):not([aria-disabled="true"]) {
  border-color: var(--surux-primary-action-bg) !important;
  background: var(--surux-primary-action-bg) !important;
  color: var(--surux-primary-contrast) !important;
  box-shadow: none !important;
}
:is(html, [data-surux-preference-preview])[data-surux-button-style="flat"][data-surux-colour-style="vivid"]:not([data-surux-contrast="high"]) .surux-list-pager > .surux-command-button[aria-label="Next page"]:not(:disabled):not([aria-disabled="true"]) :is(.surux-command-button-icon, .surux-command-button-icon i) {
  color: var(--surux-primary-contrast) !important;
}

/* Command-bar overflow "…" takes the same square finish as the buttons beside it. */
:is(html, [data-surux-preference-preview])[data-surux-button-style="flat"]:not([data-surux-contrast="high"]) .surux-command-bar .surux-command-overflow-trigger.surux-command-overflow-trigger-icon-only-subtle {
  border-radius: var(--surux-radius-control) !important;
  border-color: var(--surux-button-border) !important;
  background: var(--surux-button-bg) !important;
  color: var(--surux-button-fg) !important;
  box-shadow: none !important;
  transform: none !important;
}
:is(html, [data-surux-preference-preview])[data-surux-button-style="flat"]:not([data-surux-contrast="high"]) .surux-command-bar :is(
  .surux-command-overflow-trigger.surux-command-overflow-trigger-icon-only-subtle:is(:hover, :focus-visible, :active),
  .surux-command-overflow[open] > .surux-command-overflow-trigger.surux-command-overflow-trigger-icon-only-subtle
) {
  border-radius: var(--surux-radius-control) !important;
  background: color-mix(in srgb, var(--surux-button-bg), var(--surux-button-fg) 12%) !important;
  box-shadow: none !important;
  transform: none !important;
}
}