:global(.ui-button) {
  &[data-state~='disabled'] {
    & > :global(.button-wrapper) {
      cursor: not-allowed;
    }
    &:not([data-state*='loading']) {
      &[data-state~="gray"],
      &[data-state~="dark"],
      &[data-state~="primary"],
      &[data-state~="secondary"],
      &[data-state~="accent"],
      &[data-state~="triadic"],
      &[data-state~="split"] {
        background-color: var(--disabled-dark);
        box-shadow: none !important;
        color: var(--palette-light-04);
        cursor: not-allowed;
        pointer-events: none;
      }
      &[data-state*="hover"],
      &[data-state*="label"] {
        background: none !important;
        color: var(--disabled-dark) !important;
      }
      &[data-state*="stroked"] {
        background: var(--palette-light-02) !important;
        box-shadow: none !important;
        color: var(--disabled-dark) !important;
      }
    }
  }
}