:global(.ui-button) {
  /* Hover Color */
  &[data-state~="hover-light"] {
    color: var(--secondary-light-text);
    &:hover {
      color: var(--primary-light-text);
    }
  }
  &[data-state~="hover-dark"] {
    color: var(--secondary-dark-text);
    &:hover {
      color: var(--primary-dark-text);
    }
  }
  &[data-state~="hover-gray"] {
    color: var(--palette-light-00);
    &:hover {
      color: var(--primary-dark-text);
    }
  }
  &[data-state~="hover-primary"] {
    color: var(--secondary-dark-text);
    &:hover {
      color: var(--primary-color);
    }
  }
  &[data-state~="hover-secondary"] {
    color: var(--secondary-dark-text);
    &:hover {
      color: var(--secondary-color);
    }
  }
  &[data-state~="hover-accent"] {
    color: var(--secondary-dark-text);
    &:hover {
      color: var(--accent-color);
    }
  }
  &[data-state~="hover-triadic"] {
    color: var(--secondary-dark-text);
    &:hover {
      color: var(--triadic-color);
    }
  }
  &[data-state~="hover-split"] {
    color: var(--secondary-dark-text);
    &:hover {
      color: var(--split-color);
    }
  }
  /* Label Color */
  &[data-state~="label-currentColor"] {
    color: currentColor;
    &:hover {
      background-color: color-mod(var(--black) a(4%));
    }
  }
  &[data-state~="label-light"] {
    color: var(--secondary-light-text);
    &:hover {
      color: var(--primary-light-text);
      background-color: var(--border-light-02);
    }
  }
  &[data-state~="label-gray"] {
    color: var(--secondary-dark-text);
    &:hover {
      color: var(--primary-dark-text);
      background-color: var(--palette-light-04);
    }
  }
  &[data-state~="label-primary"] {
    color: var(--primary-color);
    &:hover {
      background-color: var(--primary-fade-02);
    }
  }
  &[data-state~="label-secondary"] {
    color: var(--secondary-color);
    &:hover {
      background-color: var(--secondary-fade-02);
    }
  }
  &[data-state~="label-accent"] {
    color: var(--accent-color);
    &:hover {
      background-color: var(--accent-fade-02);
    }
  }
  &[data-state~="label-triadic"] {
    color: var(--triadic-color);
    &:hover {
      background-color: var(--triadic-fade-02);
    }
  }
  &[data-state~="label-split"] {
    color: var(--split-color);
    &:hover {
      background-color: var(--split-fade-02);
    }
  }
  /* Text Color */
  &[data-state~="text-currentColor"] {
    color: currentColor;
  }
  &[data-state~="text-primary"] {
    color: var(--primary-color);
    &:hover {
      color: var(--primary-dark-color);
    }
  }
  &[data-state~="text-secondary"] {
    color: var(--secondary-color);
    &:hover {
      color: var(--secondary-dark-color);
    }
  }
  &[data-state~="text-accent"] {
    color: var(--accent-color);
    &:hover {
      color: var(--accent-dark-color);
    }
  }
  &[data-state~="text-triadic"] {
    color: var(--triadic-color);
    &:hover {
      color: var(--triadic-dark-color);
    }
  }
  &[data-state~="text-split"] {
    color: var(--split-color);
    &:hover {
      color: var(--split-dark-color);
    }
  }
  /* Block Color */
  &[data-state~="gray"] {
    background-color: var(--palette-light-02);
    color: var(--secondary-dark-text);
    &:hover {
      background-color: var(--palette-light-01);
    }
  }
  &[data-state~="dark"] {
    background-color: var(--palette-dark-04);
    color: var(--primary-light-text);
    &:hover {
      background-color: var(--palette-dark-02);
    }
  }
  &[data-state~="primary"] {
    background-color: var(--primary-color);
    color: var(--primary-light-text);
    &:hover {
      background-color: var(--primary-dark-color);
    }
  }
  &[data-state~="secondary"] {
    background-color: var(--secondary-color);
    color: var(--primary-light-text);
    &:hover {
      background-color: var(--secondary-dark-color);
    }
  }
  &[data-state~="accent"] {
    background-color: var(--accent-color);
    color: var(--primary-light-text);
    &:hover {
      background-color: var(--accent-dark-color);
    }
  }
  &[data-state~="triadic"] {
    background-color: var(--triadic-color);
    color: var(--primary-light-text);
    &:hover {
      background-color: var(--triadic-dark-color);
    }
  }
  &[data-state~="split"] {
    background-color: var(--split-color);
    color: var(--primary-light-text);
    &:hover {
      background-color: var(--split-dark-color);
    }
  }
  /* Stroked Color */
  &[data-state*="stroked"] {
    box-shadow: inset 0 0 0 1px currentColor;
  }
  &[data-state~="stroked-gray"] {
    color: var(--palette-light-01);
    &:hover {
      background-color: var(--palette-light-04);
      color: var(--palette-light-00);
      &:not([data-state~="disabled"]) {
        & > :global(.button-wrapper) {
          & > svg,
          & > :global(.button-label) {
            color: var(--primary-dark-text);
          }
        }
      }
    }
    & > :global(.button-wrapper) {
      & > svg,
      & > :global(.button-label) {
        color: var(--secondary-dark-text);
      }
    }
  }
  &[data-state~="stroked-primary"] {
    color: var(--primary-color);
    &:hover {
      background-color: var(--primary-fade-02);
    }
  }
  &[data-state~="stroked-secondary"] {
    color: var(--secondary-color);
    &:hover {
      background-color: var(--secondary-fade-02);
    }
  }
  &[data-state~="stroked-accent"] {
    color: var(--accent-color);
    &:hover {
      background-color: var(--accent-fade-02);
    }
  }
  &[data-state~="stroked-triadic"] {
    color: var(--triadic-color);
    &:hover {
      background-color: var(--triadic-fade-02);
    }
  }
  &[data-state~="stroked-split"] {
    color: var(--split-color);
    &:hover {
      background-color: var(--split-color);
      & > :global(.button-wrapper) {
        & > svg,
        & > :global(.button-label) {
          color: var(--primary-light-text);
        }
      }
    }
  }
}