/* A single face for native and custom buttons. Keep each control's geometry. */
@layer button-palette {
  :root {
    --button-face-navy: linear-gradient(#355c86, #183c64 14%, #0b2545 83%, #05172a);
    --button-face-cyan: linear-gradient(#08778d, #005b73 15%, #00677f 56%, #00758b 85%, #004655);
    --button-face-disabled: linear-gradient(#26384c, #182638);
    --button-bevel: inset 0 1px 2px #c6e6ff70, inset 0 -3px 3px #0009, 0 3px 4px #0008;
  }

  :where(button, [role="button"], input:is([type="button"], [type="submit"], [type="reset"]), a.button,
      .three-floor-picker, #roomCustomColor, #levelsMenu > summary, .floor-plan-menu > summary, #threeAppearanceMenu > summary,
      .trace-area-selection > summary):not(:where(#projectName, [data-settings-icon])) {
    background: var(--button-face-navy) !important;
    color: #f5fbff !important;
    border-color: #477199 !important;
    box-shadow: var(--button-bevel) !important;
    opacity: 1 !important;
  }

  :where(button, [role="button"], input:is([type="button"], [type="submit"], [type="reset"]), a.button,
      .three-floor-picker, #roomCustomColor, #levelsMenu > summary, .floor-plan-menu > summary, #threeAppearanceMenu > summary,
      .trace-area-selection > summary):not(:where(#projectName, [data-settings-icon])):where(:active, .active, [aria-pressed="true"],
      [aria-selected="true"], [aria-checked="true"], [aria-expanded="true"]:not(#exportBtn)),
  #roomCustomColor.is-current,
  :is(#levelsMenu, .floor-plan-menu, #threeAppearanceMenu, .trace-area-selection)[open] > summary {
    background: var(--button-face-cyan) !important;
    border-color: #6ae9fb !important;
  }

  :is(button, [role="button"], input:is([type="button"], [type="submit"], [type="reset"]), a.button):not(:where(#projectName, [data-settings-icon])):is(:disabled, [aria-disabled="true"]) {
    background: var(--button-face-disabled) !important;
    color: #8698aa !important;
    border-color: #394e63 !important;
    box-shadow: inset 0 1px 2px #a4c4e329, inset 0 -2px 3px #0006 !important;
  }

  button.finish-swatch small {color:inherit !important}
}

@layer button-palette {
  button.estimate-fixture-button {
    background:linear-gradient(#1c3850,#102638) !important;
    border-color:#35546b !important;
    box-shadow:inset 0 1px #a5d5ff28,0 1px 2px #0005 !important;
  }
  button.estimate-fixture-button:is(:hover,:focus-visible) {
    border-color:#6b9db9 !important;
  }
  button.estimate-fixture-button:is(:active,[aria-pressed="true"]),
  tr.is-selected button.estimate-fixture-button {
    background:linear-gradient(#21485b,#153245) !important;
    border-color:#4ec9e4 !important;
  }
}

@layer button-palette {
 html[data-theme=light] {
  --button-face-navy:linear-gradient(#fff,#edf3f8 25%,#dce6f0);
  --button-face-cyan:linear-gradient(#377cd0,#155db7 35%,#114b91);
  --button-face-disabled:linear-gradient(#edf1f5,#e1e7ee);
  --button-bevel:inset 0 1px 2px #fff9,inset 0 -2px 2px #172b4029,0 2px 4px #172b4033;
 }
 html[data-theme=light] :is(button,[role="button"],a.button):not(:where(#projectName,[data-settings-icon])) {
  color:#172b40!important;
  border-color:#aabccd!important;
 }
 html[data-theme=light] :is(button,[role="button"],a.button):not(:where(#projectName,[data-settings-icon])):is(:active,.active,[aria-pressed=true],[aria-selected=true],[aria-checked=true],[aria-expanded=true]:not(#exportBtn)) {
  color:white!important;
  border-color:#155db7!important;
 }
 html[data-theme=light] :is(button,[role="button"],a.button):is(:disabled,[aria-disabled=true]) {
  color:#536a81!important;
  border-color:#c5d0dc!important;
  box-shadow:inset 0 1px #fff8!important;
 }
 html[data-color-blind=on] button:is(.active,[aria-pressed=true],[aria-selected=true],[aria-checked=true]):not(:disabled) {
  box-shadow:inset 0 0 0 2px currentColor,var(--button-bevel)!important;
 }

  html[data-theme=light] #settingsForm button[type=submit].active {
    background:var(--settings-save-active-face,linear-gradient(#08778d,#005b73 15%,#00677f 56%,#00758b 85%,#004655)) !important;
    border-color:#00758b !important;
  }

  html[data-theme=light] #retailPlanningDialog[data-panel=estimate] button {
    background:#f8fafc !important;
    color:var(--estimate-ink) !important;
    border-color:var(--estimate-rule) !important;
    box-shadow:none !important;
  }
  html[data-theme=light] #retailPlanningDialog[data-panel=estimate] button:hover:not(:disabled) {
    background:var(--estimate-selected) !important;
  }
  html[data-theme=light] #retailPlanningDialog[data-panel=estimate] button.estimate-fixture-button {
    background:transparent !important;
    border-color:transparent !important;
  }
  html[data-theme=light] #retailPlanningDialog[data-panel=estimate] button:disabled {
    color:var(--estimate-muted) !important;
  }
}