i-icon,
  .icon-button:hover .icon ::slotted(maui-icon) {
    --maui-icon-color-override: var(--maui-color-interaction-interactionhover);
  }

  .shape--circular {
    --maui-focus-radius: var(--maui-radii-pill-radius);
    border-radius: var(--maui-radii-pill-radius);
  }

  .shape--default {
    border-radius: var(--maui-radii-default-radius);
  }

  .transparent {
    background-color: transparent;
  }

  .focus-inverted {
    --maui-focus-outline-box-shadow: var(
      --maui-focus-outline-box-shadow-inverted
    );
  }

  .focus-non-inverted {
    --maui-focus-outline-box-shadow: var(--maui-effect-shadow-focus-offset-x)
      var(--maui-effect-shadow-focus-offset-y)
      var(--maui-effect-shadow-focus-radius)
      var(--maui-effect-shadow-focus-spread) var(--maui-color-interaction-focus);
  }

  .inverted.focus-default {
    --maui-focus-outline-box-shadow: var(
      --maui-focus-outline-box-shadow-inverted
    );
  }

  [disabled] {
    cursor: not-allowed;
  }

  [disabled]:not(.transparent, .selectable:not(.selected)) {
    background-color: var(--maui-color-disabled-background);
    border: 0;
  }

  [disabled] .icon maui-icon,
  [disabled] .icon ::slotted(maui-icon) {
    --maui-icon-color-override: var(--maui-color-disabled-foreground);
  }

  [disabled].icon-button:hover .icon maui-icon,
  [disabled].icon-button:hover .icon ::slotted(maui-icon) {
    --maui-icon-color-override: var(--maui-color-disabled-foreground);
  }

  .inverted[disabled]:not(.transparent, .selectable:not(.selected)) {
    background-color: var(--maui-color-disabled-background-inverted);
  }

  .inverted[disabled] .icon maui-icon,
  .inverted[disabled] .icon ::slotted(maui-icon) {
    --maui-icon-color-override: var(--maui-color-disabled-foreground-inverted);
  }

  .inverted[disabled].icon-button:hover .icon maui-icon,
  .inverted[disabled].icon-button:hover .icon ::slotted(maui-icon) {
    --maui-icon-color-override: var(--maui-color-disabled-foreground-inverted);
  }

  .default {
    --maui-icon-button-background-color: var(--maui-color-grey-06);
  }

  .default:hover {
    --maui-icon-button-background-color: var(--maui-color-grey-07);
  }

  .default:not([disabled]) .icon maui-icon,
  .default:not([disabled]) .icon ::slotted(maui-icon) {
    --maui-icon-color-override: var(--maui-color-brand-light);
  }

  .default:not([disabled]).icon-button:hover .icon maui-icon,
  .default:not([disabled]).icon-button:hover .icon ::slotted(maui-icon) {
    --maui-icon-color-override: var(--maui-color-brand-light);
  }

  .small {
    width: 24px;
    height: 24px;
  }

  .medium {
    width: 32px;
    height: 32px;
  }

  .large {
    width: 50px;
    height: 50px;
  }

  .sr-only {
    inset: 0;
    width: auto;
    height: auto;
  }
´