ry-hover-background-color: var(
      --maui-color-interaction-buttonprimaryhover
    );
    --maui-button-primary-inverted-hover-background-color: var(
      --maui-color-interaction-interaction-invertedhover
    );

    --maui-button-secondary-text-color: var(
      --maui-color-interaction-buttonsecondary
    );
    --maui-button-secondary-inverted-text-color: var(
      --maui-color-interaction-interaction-inverted
    );
    --maui-button-secondary-hover-text-color: var(--maui-color-brand-white);
    --maui-button-secondary-inverted-hover-text-color: var(
      --maui-color-interaction-buttonsecondaryhover
    );
    --maui-button-secondary-border-width: 3px;
    --maui-button-secondary-background-color: var(
      --maui-color-interaction-buttonsecondary
    );
    --maui-button-secondary-inverted-background-color: var(
      --maui-color-interaction-interaction-inverted
    );
    --maui-button-secondary-hover-background-color: var(
      --maui-color-interaction-buttonsecondaryhover
    );
    --maui-button-secondary-inverted-hover-background-color: var(
      --maui-color-interaction-interaction-invertedhover
    );

    --maui-button-medium-min-height: calc(50px - 6px);
    --maui-button-medium-padding: calc(var(--maui-spacing-3) - 6px)
      calc(var(--maui-spacing-5) - 2px);

    --maui-button-small-min-height: calc(30px - 2px);
    --maui-button-small-padding: calc(var(--maui-spacing-2) - 6px)
      calc(var(--maui-spacing-5) - 2px);

    --maui-button-disabled-opacity: 1;

    --maui-button-primary-disabled-background-color: var(
      --maui-color-disabled-background
    );
    --maui-button-primary-inverted-disabled-background-color: var(
      --maui-color-disabled-background-inverted
    );
    --maui-button-primary-disabled-border-color: var(
      --maui-color-disabled-background
    );
    --maui-button-primary-inverted-disabled-border-color: transparent;
    --maui-button-primary-disabled-text-color: var(
      --maui-color-disabled-foreground
    );
    --maui-button-primary-inverted-disabled-text-color: var(
      --maui-color-disabled-foreground-inverted
    );

    --maui-button-secondary-disabled-background-color: transparent;
    --maui-button-secondary-disabled-border-color: var(
      --maui-color-disabled-background
    );
    --maui-button-secondary-disabled-text-color: var(
      --maui-color-disabled-background
    );

    font-family: var(--maui-font-family-headline);

    --maui-focus-outline-offset: 5px;
  }

  .four_y.button {
    transition: background-color 0.3s ease-out, border 0.3s ease-out,
      color 0.3s ease-out, outline-color 0.3s ease-out;
  }

  .four_y.button.primary {
    transition: background-color 0.3s ease-out, border 0.3s ease-out,
      color 0.3s ease-out, outline-color 0.3s ease-out, box-shadow 0.3s ease-out;
  }

  .four_y.button.primary {
    --maui-button-focus-border-color: var(
      --maui-color-interaction-buttonprimaryhover
    );

    outline-color: var(--maui-color-interaction-buttonprimary);
  }

  .four_y.button.primary.inverted {
    --maui-button-focus-border-color: var(
      --maui-color-interaction-focus-inverted
    );
    outline-color: var(--maui-color-interaction-interaction-inverted);
  }

  .four_y.button.secondary {
    --maui-button-focus-border-color: var(--maui-color-interaction-focus);
    outline-color: var(--maui-color-interaction-buttonsecondary);
  }

  .four_y.button.muted {
    --maui-button-focus-border-color: var(
      --maui-button-muted-color,
      --maui-color-interaction-focus
    );
    outline-color: var(
      --maui-button-muted-color,
      var(--maui-color-interaction-buttonsecondary)
    );
    color: var(
      --maui-button-muted-color,
      var(--maui-color-interaction-buttonsecondary)
    );
  }

  .four_y.button.inverted.secondary,
  .four_y.button.inverted.muted {
    --maui-button-focus-border-color: var(
      --maui-color-interaction-focus-inverted
    );
    outline-color: var(--maui-color-interaction-interaction-inverted);
  }

  .four_y.secondary:not(:hover),
  .four_y.muted:not(:hover) {
    background-color: transparent;
  }

  .four_y.button {
    border-radius: var(--maui-radii-pill-radius);
    --maui-focus-radius: var(--maui-radii-pill-radius);
    --maui-focus-outline-box-shadow: 0 0 0 1px
      var(--maui-button-focus-border-color);

    border: none;
  }

  .four_y.button,
  .four_y.button:focus {
    outline: 3px solid transparent;
    outline-offset: -1px;
  }

  .four_y.button.small,
  .four_y.button.small:focus {
    outline: 2px solid transparent;
  }

  .four_y.button.small:not(.secondary, .muted),
  .four_y.button.small:not(.secondary, .muted),
  :focus {
    outline: 2px solid transparent;
  }

  .four_y.button.primary[disabled] {
    color: var(--maui-color-disabled-foreground);
    outline-color: var(--maui-color-disabled-background);
  }
  .four_y.button.inverted.primary[disabled] {
    color: var(--maui-color-disabled-foreground-inverted);
    outline-color: transparent;
  }

  .four_y.button.secondary[disabled],
  .four_y.button.muted[disabled] {
    color: var(--maui-color-disabled-foreground);
    outline-color: var(--maui-color-disabled-foreground);
  }

  .four_y.has-icon {
    --maui-button-medium-padding: calc(var(--maui-spacing-3) - 6px)
      calc(var(--maui-spacing-5) - 2px) calc(var(--maui-spacing-3) - 6px)
      calc(var(--maui-spacing-5) - 4px);
  }

  .four_y.primary.has-icon:disabled maui-icon,
  .four_y.secondary.has-icon:disabled maui-icon,
  .four_y.muted.has-icon:disabled maui-icon {
    --maui-icon-color: var(--maui-color-disabled-foreground);
  }

  .four_y.primary.inverted.has-icon:disabled maui-icon,
  .four_y.secondary.inverted.has-icon:disabled maui-icon,
  .four_y.muted.inverted.has-icon:disabled maui-icon {
    --maui-icon-color: var(--maui-color-disabled-foreground-inverted);
  }

  .four_y.primary:not([disabled]) {
    outline-color: var(--maui-color-interaction-buttonprimary);
  }
  .four_y.primary:not([disabled], .inverted) {
    box-shadow: 0 0 0 25px inset var(--maui-color-interaction-buttonprimary);
  }

  .four_y.primary.inverted:not([disabled]) {
    outline-color: var(--maui-color-interaction-interaction-inverted);
  }

  .four_y.primary:not([disabled]):hover {
    outline-width: 4px;
    outline-color: var(--maui-color-interaction-buttonprimaryhover);
    box-shadow: 0 0 0 25px inset
      var(--maui-color-interaction-buttonprimaryhover);
  }

  .four_y.primary.small:not([disabled]):hover {
    outline-width: 2px;
    outline-color: var(--maui-color-interaction-buttonprimaryhover);
    box-shadow: 0 0 0 25px inset
      var(--maui-color-interaction-buttonprimaryhover);
  }

  .four_y.primary.inverted:not([disabled]):hover {
    outline-color: var(--maui-color-interaction-interaction-invertedhover);
    box-shadow: 0 0 0 25px inset
      var(--maui-color-interaction-interaction-invertedhover);
  }

  .four_y.secondary:not([disabled]),
  .four_y.secondary.small:not([disabled]) {
    outline-color: var(--maui-color-interaction-buttonsecondary);
  }

  .four_y.muted:not([disabled]),
  .four_y.muted.small:not([disabled]) {
    outline-color: var(
      --maui-button-muted-color,
      var(--maui-color-interaction-buttonsecondary)
    );
  }

  .four_y.secondary.inverted:not([disabled]),
  .four_y.muted.inverted:not([disabled]) {
    outline-color: var(--maui-color-interaction-interaction-inverted);
  }

  .four_y.secondary:not([disabled]):hover {
    outline-width: 4px;
    outline-color: var(--maui-color-interaction-buttonsecondaryhover);
    box-shadow: 0 0 0 25px inset
      var(--maui-color-interaction-buttonsecondaryhover);
  }

  .four_y.secondary.small:not([disabled]):hover {
    outline-width: 3px;
    outline-color: var(--maui-color-interaction-buttonsecondaryhover);
    box-shadow: 0 0 0 25px inset
      var(--maui-color-interaction-buttonsecondaryhover);
  }

  .four_y.muted.small:not([disabled]):hover {
    outline-width: 3px;
    outline-color: var(
      --maui-button-muted-color,
      --maui-color-interaction-buttonsecondaryhover
    );
    box-shadow: 0 0 0 25px inset
      var(
        --maui-button-muted-color,
        --maui-color-interaction-buttonsecondaryhover
      );
  }

  .four_y.muted:not([disabled]):hover {
    background-color: transparent;
    outline-color: var(
      --maui-button-muted-color,
      var(--maui-color-interaction-buttonsecondaryhover)
    );
    box-shadow: 0 0 0 25px inset
      var(
        --maui-button-muted-color,
        var(--maui-color-interaction-buttonsecondaryhover)
      );

    color: var(--maui-color-brand-light);
  }

  .four_y.secondary.inverted:not([disabled]):hover,
  .four_y.muted.inverted:not([disabled]):hover {
    outline-color: var(--maui-color-interaction-interaction-invertedhover);
    box-shadow: 0 0 0 25px inset
      var(--maui-color-interaction-interaction-invertedhover);
  }

  .four_y.medium {
    ‡