r: var(--maui-button-secondary-inverted-hover-text-color);
  }

  /** Muted -------------------------- */

  .muted {
    background-color: var(
      --maui-button-secondary-background-color,
      transparent
    );
    border: var(--maui-button-secondary-border-width, 0) solid
      var(--maui-color-interaction-buttonsecondary, transparent);
    color: var(
      --maui-button-secondary-text-color,
      var(--maui-button-text-color)
    );
  }

  .muted.inverted {
    background-color: var(
      --maui-button-secondary-inverted-background-color,
      transparent
    );
    border: var(--maui-button-secondary-border-width, 0) solid
      var(--maui-color-interaction-buttonsecondary-inverted, transparent);
    color: var(
      --maui-button-secondary-inverted-text-color,
      var(--maui-button-inverted-text-color)
    );
  }

  .muted:hover {
    background-color: var(--maui-button-secondary-hover-background-color);
    border-color: var(--maui-button-secondary-hover-background-color);
    color: var(--maui-button-secondary-hover-text-color);
  }

  .muted.inverted:hover {
    background-color: var(
      --maui-button-secondary-inverted-hover-background-color
    );
    border-color: var(--maui-button-secondary-inverted-hover-background-color);
    color: var(--maui-button-secondary-inverted-hover-text-color);
  }

  .muted:not(:disabled) maui-icon {
    --maui-icon-color: var(
      --maui-button-secondary-text-color,
      var(--maui-button-text-color)
    );
  }

  .muted.inverted:not(:disabled) maui-icon {
    --maui-icon-color: var(
      --maui-button-secondary-inverted-text-color,
      var(--maui-button-inverted-text-color)
    );
  }

  .muted:hover:not(:disabled) maui-icon {
    --maui-icon-color: var(--maui-button-secondary-hover-text-color);
  }

  .muted.inverted:hover:not(:disabled) maui-icon {
    --maui-icon-color: var(--maui-button-secondary-inverted-hover-text-color);
  }

  /** Disabled -------------------------- */

  .button:disabled {
    cursor: not-allowed;
  }

  .primary.has-icon:disabled maui-icon {
    --maui-icon-color: var(--maui-button-primary-disabled-text-color);
  }

  .primary.inverted.has-icon:disabled maui-icon {
    --maui-icon-color: var(--maui-button-primary-inverted-disabled-text-color);
  }

  .primary:disabled {
    opacity: var(--maui-button-disabled-opacity, 1);
    background-color: var(--maui-button-primary-disabled-background-color);
    border-color: var(--maui-button-primary-disabled-border-color);
    color: var(--maui-button-primary-disabled-text-color);
  }

  .primary.inverted:disabled {
    background-color: var(
      --maui-button-primary-inverted-disabled-background-color
    );
    border-color: var(--maui-button-primary-inverted-disabled-border-color);
    color: var(--maui-button-primary-inverted-disabled-text-color);
  }

  .secondary.has-icon:disabled maui-icon {
    --maui-icon-color: var(--maui-button-secondary-disabled-text-color);
  }

  .secondary.inverted.has-icon:disabled maui-icon {
    --maui-icon-color: var(
      --maui-button-secondary-inverted-disabled-text-color
    );
  }

  .secondary:disabled {
    opacity: var(--maui-button-disabled-opacity, 1);
    background-color: var(--maui-button-secondary-disabled-background-color);
    border-color: var(--maui-button-secondary-disabled-border-color);
    color: var(--maui-button-secondary-disabled-text-color);
  }

  .secondary.inverted:disabled {
    background-color: var(
      --maui-button-secondary-inverted-disabled-background-color
    );
    border-color: var(--maui-button-secondary-inverted-disabled-border-color);
    color: var(--maui-button-secondary-inverted-disabled-text-color);
  }
|