/* Global disabled-button visual state.
   Loaded last and given enough specificity to override older component rules. */
html body button:disabled:not(#ccc-disabled-state-a):not(#ccc-disabled-state-b),
html body button[aria-disabled="true"]:not(#ccc-disabled-state-a):not(#ccc-disabled-state-b),
html body button.is-disabled:not(#ccc-disabled-state-a):not(#ccc-disabled-state-b),
html body button.disabled:not(#ccc-disabled-state-a):not(#ccc-disabled-state-b),
html body [role="button"][aria-disabled="true"]:not(#ccc-disabled-state-a):not(#ccc-disabled-state-b),
html body a[aria-disabled="true"]:not(#ccc-disabled-state-a):not(#ccc-disabled-state-b){
  cursor: not-allowed !important;
  pointer-events: none !important;
  opacity: .62 !important;
  filter: grayscale(1) saturate(.15) !important;
  color: rgba(224, 225, 230, .72) !important;
  border-color: rgba(170, 173, 184, .38) !important;
  background: rgba(92, 95, 106, .48) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Some navigation controls are transparent wrappers around the actual visible
   circle. Gray the circle and label as part of the same disabled state. */
html body button:disabled:not(#ccc-disabled-state-a):not(#ccc-disabled-state-b) .ccc-main-action-circle,
html body button[aria-disabled="true"]:not(#ccc-disabled-state-a):not(#ccc-disabled-state-b) .ccc-main-action-circle,
html body button.is-disabled:not(#ccc-disabled-state-a):not(#ccc-disabled-state-b) .ccc-main-action-circle,
html body button.disabled:not(#ccc-disabled-state-a):not(#ccc-disabled-state-b) .ccc-main-action-circle{
  background: rgba(92, 95, 106, .62) !important;
  border-color: rgba(170, 173, 184, .38) !important;
  color: rgba(224, 225, 230, .68) !important;
  box-shadow: none !important;
  filter: grayscale(1) saturate(.15) !important;
  transform: none !important;
}

html body button:disabled:not(#ccc-disabled-state-a):not(#ccc-disabled-state-b) .ccc-main-action-label,
html body button[aria-disabled="true"]:not(#ccc-disabled-state-a):not(#ccc-disabled-state-b) .ccc-main-action-label,
html body button.is-disabled:not(#ccc-disabled-state-a):not(#ccc-disabled-state-b) .ccc-main-action-label,
html body button.disabled:not(#ccc-disabled-state-a):not(#ccc-disabled-state-b) .ccc-main-action-label,
html body button:disabled:not(#ccc-disabled-state-a):not(#ccc-disabled-state-b) .material-symbols-outlined,
html body button[aria-disabled="true"]:not(#ccc-disabled-state-a):not(#ccc-disabled-state-b) .material-symbols-outlined,
html body button.is-disabled:not(#ccc-disabled-state-a):not(#ccc-disabled-state-b) .material-symbols-outlined,
html body button.disabled:not(#ccc-disabled-state-a):not(#ccc-disabled-state-b) .material-symbols-outlined{
  color: rgba(224, 225, 230, .62) !important;
  opacity: 1 !important;
}

/* The desktop circular toolbar uses transparent outer wrappers. Keep those
   wrappers transparent while the inner visible circle carries the gray state. */
html body .ccc-main-quick-actions button:disabled:not(#ccc-disabled-state-a):not(#ccc-disabled-state-b),
html body .ccc-main-quick-actions button[aria-disabled="true"]:not(#ccc-disabled-state-a):not(#ccc-disabled-state-b),
html body .ccc-main-quick-actions button.is-disabled:not(#ccc-disabled-state-a):not(#ccc-disabled-state-b),
html body .ccc-main-quick-actions button.disabled:not(#ccc-disabled-state-a):not(#ccc-disabled-state-b){
  background: transparent !important;
}