@utility button {
  & {
    @apply pigment-with-svg;
    flex-shrink: 0; /* Prevents button from shrinking when used in flex elements */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
    max-width: 100%;
    padding: 0.125lh 0.75lh;
    font: inherit;
    text-decoration-line: none !important;

    &[disabled] {
      cursor: default;
    }

    * {
      pointer-events: none;
    }

    svg path {
      @apply transition-scaffold;
      transition: var(--transition-values);
      transition-property: var(--transition-props);
    }
  }
}

@utility button-icon {
  & {
    padding: 0.5em;
  }
}

@utility button-round {
  & {
    border-radius: 50%;
  }
}