/* Neutral controls leave colour to product imagery and meaningful status. */
:root {
  --control-fill:#232323;
  --control-on-fill:#fff;
  --control-fill-hover:#3b3b3d;
  --control-text:#232323;
  --control-border:#79797f;
  --control-hover:rgba(29,29,31,.06);
  --control-focus:#0066cc;
}
@media(prefers-color-scheme:dark) {
  :root {
    --control-fill:#ededf0;
    --control-on-fill:#18181a;
    --control-fill-hover:#fff;
    --control-text:#f5f5f7;
    --control-border:#92929b;
    --control-hover:rgba(242,242,247,.08);
    --control-focus:#8bbcff;
  }
}
html body .btn[class], html body .button {
  background-color:var(--control-fill) !important;
  border-color:var(--control-fill) !important;
  color:var(--control-on-fill) !important;
}
html body .btn[class]:is(:hover,:active), html body .button:is(:hover,:active) {
  background-color:var(--control-fill-hover) !important;
  border-color:var(--control-fill-hover) !important;
  color:var(--control-on-fill) !important;
}
html body .btn[class*="-outline"], html body .button.secondary {
  background-color:transparent !important;
  color:var(--control-text) !important;
  border:1px solid var(--control-border) !important;
  box-shadow:none !important;
}
html body .btn[class*="-outline"]:is(:hover,:active), html body .button.secondary:is(:hover,:active) {
  background-color:var(--control-hover) !important;
  color:var(--control-text) !important;
  border-color:var(--control-border) !important;
}
/* Existing white controls sit on photographic or dark sections. */
html body .btn.btn-white, html body .btn.btn-white:is(:hover,:active) {
  background-color:#f5f5f7 !important; border-color:#f5f5f7 !important; color:#232323 !important;
}
html body .btn.btn-white-outline, html body .btn.btn-white-outline:is(:hover,:active) {
  background-color:transparent !important; border-color:#f5f5f7 !important; color:#f5f5f7 !important;
}
html body .site-language label, html body .language-control>svg { color:var(--control-text); }
html body .site-language select, html body .language-control select {
  color:var(--control-text) !important;
  border:1px solid var(--control-border) !important;
  background-color:transparent !important;
}
html body .site-language select:focus { border-color:var(--control-border) !important; box-shadow:none !important; }
html body .contact-security button {
  color:var(--control-text) !important;
  border-color:var(--control-border) !important;
  background-color:transparent !important;
}
html body .contact-security button:hover { background-color:var(--control-hover) !important; }
html body .workflow-tabs button[aria-selected="true"] {
  background-color:var(--control-fill); color:var(--control-on-fill); border-color:var(--control-fill);
}
html body .clear-draft { color:var(--control-text); }
html body :is(.btn,.button,.contact-security button):is(:disabled,.disabled) { opacity:.55; cursor:not-allowed; }
html body :is(.btn,.button,.site-language select,.language-control select,.contact-security button):focus-visible {
  outline:3px solid var(--control-focus) !important; outline-offset:4px !important;
}