*/
  .has-icon {
    display: grid;
    gap: var(--maui-spacing-2);
  }

  .has-icon.icon--left {
    grid-template-areas: 'icon content';
  }

  .has-icon.icon--right {
    grid-template-areas: 'content icon';
  }

  .has-icon.icon--left .icon {
    margin-left: -2px;
  }

  .has-icon.icon--right .icon {
    margin-right: -2px;
  }

  .icon {
    grid-area: icon;
  }

  /** Width -------------------------- */
  .auto {
    width: auto;
  }

  .full {
    width: 100%;
  }

  /** Medium -------------------------- */

  .medium {
    min-height: var(--maui-button-medium-min-height);
    padding: var(--maui-button-medium-padding);
    z