/* Bevel button finish. Match design on Skeuomorphism, and a user choice with any other design.
   Gated on the finish attribute only. A hard key: light top, dark bottom bevel, no hover lift. */
@media screen and (forced-colors: none) {
:is(html, [data-surux-preference-preview])[data-surux-button-style="bevel"]:not([data-surux-contrast="high"]) {
  --surux-button-radius-pill: .375rem;
  --surux-button-radius-control: .375rem;
  --surux-button-radius-chip: .375rem;
}
/* Token layer sits in :where() so a tone or a context rule wins by one class. */
:is(html, [data-surux-preference-preview])[data-surux-button-style="bevel"]: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-button-radius-control, .375rem);
  --surux-button-border: var(--surux-skeuo-key-edge, color-mix(in srgb, var(--surux-text, CanvasText) 45%, var(--surux-surface, Canvas)));
  --surux-button-bg: var(--surux-skeuo-key, var(--surux-surface, Canvas));
  --surux-button-fg: var(--surux-text, CanvasText);
}
:is(html, [data-surux-preference-preview])[data-surux-button-style="bevel"]: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
) {
  --surux-button-radius: var(--surux-button-radius-control, .375rem);
  --surux-button-composed-bg:
    linear-gradient(180deg, var(--surux-skeuo-key-sheen, rgba(255, 255, 255, .35)) 0%, rgba(255, 255, 255, 0) 55%, var(--surux-skeuo-key-shade, rgba(0, 0, 0, .12)) 100%),
    var(--surux-button-bg);
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  filter: none;
  box-shadow:
    inset 0 1px 0 var(--surux-skeuo-key-top, rgba(255, 255, 255, .65)),
    inset 0 -1px 0 var(--surux-skeuo-key-bottom, rgba(0, 0, 0, .28)),
    0 1px 2px var(--surux-skeuo-cast, rgba(0, 0, 0, .2)),
    0 1px 0 var(--surux-skeuo-lip, rgba(255, 255, 255, .35)) !important;
}
:is(html, [data-surux-preference-preview])[data-surux-button-style="bevel"]: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(.surux-button-tone-standard, .surux-button-tone-secondary, .surux-icon-btn, .surux-search-submit-btn, .surux-address-tool, .surux-page-all, .surux-sidebar-close, :not([class*="surux-button-tone-"])) {
  --surux-button-bg: var(--surux-skeuo-key, var(--surux-surface, Canvas));
  --surux-button-border: var(--surux-skeuo-key-edge, color-mix(in srgb, var(--surux-text, CanvasText) 45%, var(--surux-surface, Canvas)));
  --surux-button-fg: var(--surux-text, CanvasText);
  --surux-button-icon-fg: var(--surux-text, CanvasText);
}
:is(html, [data-surux-preference-preview])[data-surux-button-style="bevel"]:not([data-surux-contrast="high"]) :is(.surux-button-tone-action, .btn.surux-button-tone-action, .surux-command-button.surux-button-tone-action) {
  --surux-button-border: color-mix(in srgb, var(--surux-primary) 55%, #000 45%);
  --surux-skeuo-key-sheen: rgba(255, 255, 255, .3);
  --surux-skeuo-key-top: rgba(255, 255, 255, .45);
  --surux-skeuo-key-bottom: rgba(0, 0, 0, .25);
}
:is(html, [data-surux-preference-preview])[data-surux-button-style="bevel"]:not([data-surux-contrast="high"]) :is(.surux-button-nav, .surux-sidebar-toggle, .surux-command-overflow-trigger) {
  border-radius: var(--surux-button-radius-pill, .375rem) !important;
}
:is(html, [data-surux-preference-preview])[data-surux-button-style="bevel"]: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="bevel"]:not([data-surux-contrast="high"]) :is(
  .btn:not(.btn-close):not(:where(.surux-toast-button, .surux-picker-action)):not(.dropdown-toggle),
  .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
)::after {
  display: none;
}
:is(html, [data-surux-preference-preview])[data-surux-button-style="bevel"]: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, :focus-visible) {
  border-color: var(--surux-button-border) !important;
  filter: brightness(1.05);
  transform: none;
  box-shadow:
    inset 0 1px 0 var(--surux-skeuo-key-top, rgba(255, 255, 255, .65)),
    inset 0 -1px 0 var(--surux-skeuo-key-bottom, rgba(0, 0, 0, .28)),
    0 1px 2px var(--surux-skeuo-cast, rgba(0, 0, 0, .2)),
    0 1px 0 var(--surux-skeuo-lip, rgba(255, 255, 255, .35)) !important;
}
:is(html, [data-surux-preference-preview])[data-surux-button-style="bevel"]: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, .surux-breadcrumb-back
):focus-visible {
  outline: 2px solid var(--surux-primary) !important;
  outline-offset: 2px !important;
}
:is(html, [data-surux-preference-preview])[data-surux-button-style="bevel"]:not([data-surux-contrast="high"]) :is(
  .btn:not(.btn-close):not(:where(.surux-toast-button, .surux-picker-action)):active,
  .surux-button:active, .surux-command-button:active, .surux-command-overflow-trigger:active, .surux-icon-btn:active,
  .surux-button-pressed, .surux-command-button[aria-pressed="true"],
  .surux-topbar .dropdown-toggle.show, .surux-topbar .dropdown-toggle[aria-expanded="true"],
  .surux-command-overflow[open] > .surux-command-overflow-trigger
) {
  --surux-button-composed-bg:
    linear-gradient(180deg, var(--surux-skeuo-key-shade, rgba(0, 0, 0, .18)) 0%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, .06) 100%),
    var(--surux-button-bg);
  filter: brightness(.94);
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, .32),
    inset 0 0 0 1px rgba(0, 0, 0, .06),
    0 1px 0 var(--surux-skeuo-lip, rgba(255, 255, 255, .35)) !important;
}
:is(html, [data-surux-preference-preview])[data-surux-button-style="bevel"]:not([data-surux-contrast="high"]) :is(
  .surux-button-pressed, .surux-command-button[aria-pressed="true"],
  .surux-topbar .dropdown-toggle.show, .surux-topbar .dropdown-toggle[aria-expanded="true"],
  .surux-command-overflow[open] > .surux-command-overflow-trigger
):is(.surux-button-tone-standard, .surux-button-tone-secondary, .surux-icon-btn, :not([class*="surux-button-tone-"])) {
  --surux-button-bg: color-mix(in srgb, var(--surux-skeuo-key, var(--surux-surface, Canvas)) 84%, #000 16%);
}
:is(html, [data-surux-preference-preview])[data-surux-button-style="bevel"]:not([data-surux-contrast="high"]) .btn.surux-button.surux-command-button.surux-command-button-icon-only:is(.surux-command-button-icon-only-subtle, .surux-command-button-icon-only-tinted) {
  border-color: var(--surux-skeuo-well-edge, currentColor) !important;
  border-radius: var(--surux-button-radius-control, .375rem) !important;
  background: var(--surux-skeuo-tray, var(--surux-surface, Canvas)) !important;
  box-shadow: inset 0 1px 2px var(--surux-skeuo-well-shade, rgba(0, 0, 0, .2)), 0 1px 0 var(--surux-skeuo-lip, rgba(255, 255, 255, .35)) !important;
}
:is(html, [data-surux-preference-preview])[data-surux-button-style="bevel"]: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: 1px solid var(--surux-skeuo-key-edge, currentColor) !important;
  border-radius: var(--surux-button-radius-chip, .375rem) !important;
  color: var(--surux-text, CanvasText) !important;
  background:
    linear-gradient(180deg, var(--surux-skeuo-key-sheen, rgba(255, 255, 255, .35)) 0%, rgba(255, 255, 255, 0) 55%, var(--surux-skeuo-key-shade, rgba(0, 0, 0, .12)) 100%),
    var(--surux-skeuo-key, var(--surux-surface, Canvas)) !important;
  box-shadow:
    inset 0 1px 0 var(--surux-skeuo-key-top, rgba(255, 255, 255, .65)),
    inset 0 -1px 0 var(--surux-skeuo-key-bottom, rgba(0, 0, 0, .28)),
    0 1px 2px var(--surux-skeuo-cast, rgba(0, 0, 0, .2)) !important;
}
:is(html, [data-surux-preference-preview])[data-surux-button-style="bevel"]: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-button-tone-submitted {
  --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="bevel"]: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-button-tone-approved {
  --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="bevel"]: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-button-tone-paid {
  --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="bevel"]: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-button-tone-rejected {
  --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="bevel"]: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-button-tone-warning {
  --surux-button-fg: var(--surux-warning);
  --surux-button-border: var(--surux-warning);
}
:is(html, [data-surux-preference-preview])[data-surux-button-style="bevel"]: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
):is(.surux-button-tone-destructive, .btn-danger) {
  --surux-button-fg: var(--surux-danger);
  --surux-button-border: var(--surux-danger);
}
/* In-field search, refresh and density stay engraved, not a key inside the well. */
:is(html, [data-surux-preference-preview])[data-surux-button-style="bevel"]: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
) {
  border-radius: var(--surux-button-radius-control, .375rem) !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: inset 0 1px 2px var(--surux-skeuo-well-shade, rgba(0, 0, 0, .2)) !important;
  transform: none !important;
}
:is(html, [data-surux-preference-preview])[data-surux-button-style="bevel"]:not([data-surux-contrast="high"]) .surux-list-pager > .surux-button.surux-command-button.surux-command-button-icon-only {
  border-radius: var(--surux-button-radius-control, .375rem) !important;
}
:is(html, [data-surux-preference-preview])[data-surux-button-style="bevel"]:not([data-surux-contrast="high"]) .surux-command-bar .surux-command-overflow-trigger.surux-command-overflow-trigger-icon-only-subtle {
  border-radius: var(--surux-button-radius-control, .375rem) !important;
  background: var(--surux-skeuo-tray, var(--surux-surface, Canvas)) !important;
  box-shadow: inset 0 1px 2px var(--surux-skeuo-well-shade, rgba(0, 0, 0, .2)) !important;
  transform: none !important;
}
:is(html, [data-surux-preference-preview])[data-surux-button-style="bevel"]:not([data-surux-contrast="high"]) .surux-command-button-icon {
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
:is(html, [data-surux-preference-preview])[data-surux-button-style="bevel"]:not([data-surux-contrast="high"]) .surux-page-lead .surux-breadcrumb-back {
  border-color: var(--surux-skeuo-key-edge, currentColor);
  border-radius: var(--surux-button-radius-control, .375rem);
  background: linear-gradient(180deg, var(--surux-skeuo-key-sheen, rgba(255, 255, 255, .35)), rgba(255, 255, 255, 0) 55%, var(--surux-skeuo-key-shade, rgba(0, 0, 0, .12))), var(--surux-skeuo-key, var(--surux-surface, Canvas));
  box-shadow: inset 0 1px 0 var(--surux-skeuo-key-top, rgba(255, 255, 255, .65)), inset 0 -1px 0 var(--surux-skeuo-key-bottom, rgba(0, 0, 0, .28)), 0 1px 2px var(--surux-skeuo-cast, rgba(0, 0, 0, .2));
}
@media (prefers-reduced-motion: reduce) {
  :is(html, [data-surux-preference-preview])[data-surux-button-style="bevel"]:not([data-surux-contrast="high"]) :is(.btn, .surux-button, .surux-command-button, .surux-command-overflow-trigger, .surux-icon-btn) {
    transform: none !important;
  }
}
}