/* Action colors are shared by ERP and quality commands. */
:root {
  --action-default-background: #dfe7eb;
  --action-default-color: #405762;
  --action-default-border: #aebfc7;
  --action-create-background: #bce2dd;
  --action-create-color: #245e57;
  --action-create-border: #7ab5aa;
  --action-insert-background: #c8e8ed;
  --action-insert-color: #245f6c;
  --action-insert-border: #89bac5;
  --action-copy-background: #d9def3;
  --action-copy-color: #494f86;
  --action-copy-border: #a4acd2;
  --action-save-background: #bee3dc;
  --action-save-color: #185f55;
  --action-save-border: #7eb8ab;
  --action-submit-background: #b8d8f4;
  --action-submit-color: #184b76;
  --action-submit-border: #79a8ce;
  --action-approve-background: #b8dfc2;
  --action-approve-color: #215437;
  --action-approve-border: #7cad88;
  --action-preview-background: #e1d3ef;
  --action-preview-color: #674581;
  --action-preview-border: #b49aca;
  --action-format-background: #d7e0ef;
  --action-format-color: #4a5b7d;
  --action-format-border: #9eaeca;
  --action-fill-background: #f1dfb2;
  --action-fill-color: #805b1d;
  --action-fill-border: #cfb073;
  --action-export-background: #dce8ce;
  --action-export-color: #4f6834;
  --action-export-border: #acbf8e;
  --action-refresh-background: #cce7f5;
  --action-refresh-color: #30667e;
  --action-refresh-border: #90bdcf;
  --action-delete-background: #f2d0ce;
  --action-delete-color: #923b35;
  --action-delete-border: #d09b94;
  --action-release-background: #efd3b7;
  --action-release-color: #835428;
  --action-release-border: #c7a07a;
  --action-follow-background: #edcede;
  --action-follow-color: #834761;
  --action-follow-border: #c397af;
  --action-select-background: #cfe5e6;
  --action-select-color: #33686a;
  --action-select-border: #97bfc0;
  --context-menu-enabled-background: var(--action-default-background);
  --context-menu-enabled-color: #263f49;
  --context-menu-enabled-edge: #4f8790;
  --context-menu-disabled-background: #f3f4f5;
  --context-menu-disabled-color: #92999f;
}

/* Context menus share availability feedback, including nested menu triggers. */
:root :is(.nav-context-menu, .master-context-menu, .master-image-context-menu, .image-context-menu) {
  box-sizing: border-box;
  width: 176px;
  min-width: 0;
  max-width: calc(100vw - 16px);
}

:root .master-context-menu.master-context-submenu { width: 160px; }
:root .nav-context-menu { width: 128px; }

/* Modal decisions share distinct colors, independent of toolbar action colors. */
:root :is(dialog, [role="dialog"]) button.primary {
  --button-action-background: #1c786c;
  --button-action-color: #fff;
  --button-action-border: #125c52;
}

:root :is(dialog, [role="dialog"]) button.secondary {
  --button-action-background: #e3e7eb;
  --button-action-color: #43505b;
  --button-action-border: #aeb9c3;
}

:root :is(dialog, [role="dialog"]) button.primary.danger {
  --button-action-background: #ac403b;
  --button-action-color: #fff;
  --button-action-border: #8e302d;
}

:root :is(dialog, [role="dialog"]) button:is(.primary, .secondary):not(:disabled) {
  color: var(--button-action-color) !important;
  background: var(--button-action-background) !important;
  border-color: var(--button-action-border) !important;
  font-weight: 600;
}

:root :is(dialog, [role="dialog"]) button:is(.primary, .secondary):not(:disabled):hover {
  background: color-mix(in srgb, var(--button-action-background) 88%, var(--button-action-border)) !important;
}

:root :is(dialog, [role="dialog"]) button:is(.primary, .secondary):not(:disabled):focus-visible {
  outline: 2px solid var(--button-action-border);
  outline-offset: 2px;
}

:root :is(.nav-context-menu, .master-context-menu, .master-image-context-menu, .image-context-menu) button {
  box-sizing: border-box;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

:root .master-context-submenu-trigger > span:first-child { min-width: 0; }
:root .master-context-submenu-trigger > span:last-child { flex-shrink: 0; }

:is(.master-image-context-menu, .image-context-menu) {
  --context-menu-enabled-background: #35494e;
  --context-menu-enabled-color: #edf6f5;
  --context-menu-enabled-edge: #81bdb0;
  --context-menu-disabled-background: #282d30;
  --context-menu-disabled-color: #778187;
}

:root :is(.nav-context-menu, .master-context-menu, .master-image-context-menu, .image-context-menu) button:not(:disabled, [aria-disabled="true"], [aria-disabled="true"] *, [data-control-locked="true"], [data-control-locked="true"] *, .is-requirements-blocked) {
  color: var(--button-action-color, var(--context-menu-enabled-color)) !important;
  background: var(--button-action-background, var(--context-menu-enabled-background)) !important;
  box-shadow: inset 3px 0 0 var(--button-action-color, var(--context-menu-enabled-edge)) !important;
  font-weight: 600;
  opacity: 1 !important;
  cursor: pointer;
}

:root :is(.nav-context-menu, .master-context-menu, .master-image-context-menu, .image-context-menu) button:not(:disabled, [aria-disabled="true"], [aria-disabled="true"] *, [data-control-locked="true"], [data-control-locked="true"] *, .is-requirements-blocked):is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--button-action-background, var(--context-menu-enabled-background)) 80%, var(--button-action-border, var(--context-menu-enabled-edge))) !important;
}

:root :is(.nav-context-menu, .master-context-menu, .master-image-context-menu, .image-context-menu) button:not(:disabled, [aria-disabled="true"], [aria-disabled="true"] *, [data-control-locked="true"], [data-control-locked="true"] *, .is-requirements-blocked):focus-visible {
  outline: 2px solid var(--button-action-color, var(--context-menu-enabled-edge)) !important;
  outline-offset: -2px;
}

:root :is(.nav-context-menu, .master-context-menu, .master-image-context-menu, .image-context-menu) button:is(:disabled, [aria-disabled="true"], [aria-disabled="true"] *, [data-control-locked="true"], [data-control-locked="true"] *, .is-requirements-blocked) {
  color: var(--context-menu-disabled-color) !important;
  background: var(--context-menu-disabled-background) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  font-weight: 400;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  -webkit-text-fill-color: currentColor;
  cursor: not-allowed;
}

:root :is(.nav-context-menu, .master-context-menu) button.master-context-submenu-trigger > span:last-child {
  color: inherit;
}