thing.css

.button(
  block,
  className,
  destructive,
  disabled,
  loading,
  outline,
  pill,
  plain,
  primary,
  size,
  success,
  theme
) {

  .bg-base(theme);
  .bg-color(theme, "base-light");
  border: none;
  .bd-r(theme); // default is automatically selected
  .color(theme, "base-darkest");
  cursor: pointer;
  display: inline-block;
  font-family: ${theme.fonts.sans};
  font-sz(theme, "base");
  line-height: ${theme.leading.normal};
  padding: ${theme.padding["2"]} ${theme.padding["4"]};
  text-decoration: none;
  transition: background-color ${theme.transitionDuration.default} ${theme.transitionEasing.default};
  &:hover {
    .bg-color(theme, "base");
  }
  svg {
    margin-right: config("margin.2");
  }

  @if ${block} {
    width: 100%;
    label: is-block;
  }

  @if ${disabled || loading} {
    opacity: 0.5;
    cursor: not-allowed;
    label: is-disabled;
  }

  @if ${pill} {
    .bd-r(theme, "full");
    label: is-pill;
  }

  @if ${size && size === BUTTON_SIZE_SMALL} {
    .font-sz-sm(theme);
    padding: ${theme.padding["1"]} ${theme.padding["2"]};
    label: is-small;
  }

  @if ${size && size === BUTTON_SIZE_LARGE} {
    .font-sz-lg(theme);
    padding: ${theme.padding["3"]} ${theme.padding["6"]};
    label: is-large;
  }

  @if ${destructive} {
    .bg-color(theme, "destructive-dark");
    .color(theme, "white");
    &:hover {
      .bg-color(theme, "destructive-darker");
    }
    label: is-destructive;
  }

  @if ${primary} {
    .bg-color(theme, "primary-dark");
    color: ${theme.colors.white};
    &:hover {
      .bg-color(theme, "primary-darker");
    }
    label: is-primary;
  }

  @if ${success} {
    .bg-color(theme, "success-dark");
    .color(theme, "white");
    &:hover {
      .bg-color(theme, "success-darker");
    }
    label: is-success;
  }

  @if ${outline} {
    background-color: transparent;
    border: ${theme.borderWidths.default} solid ${theme.borderColors["base-darkest"]};
    .color(theme, "base-darkest");
    &:hover {
      .bg-color(theme, "base-darkesst");
      .color(theme, "white");
    }
    label: is-outline;
  }

  @if ${outline && primary} {
    .bd-color(theme, "primary-dark");
    .color(theme, "primary-dark");
    &:hover {
      .bg-color(theme, "primary-dark");
      .color(theme, "white");
    }
    label: is-outline-primary;
  }

  @if ${outline && destructive} {
    .bd-color(theme, "destructive-dark");
    .color(theme, "destructive-dark");
    &:hover {
      .bg-color(theme, "destructive-dark");
      .color(theme, "white");
    }
    label: is-outline-destructive;
  }

  @if ${outline && success} {
    .bd-color(theme, "success-dark");
    .color(theme, "success-dark");
    &:hover {
      .bg-color(theme, "success-dark");
      .color(theme, "white");
    }
    label: is-outline-success;
  }

  @if ${plain} {
    background-color: transparent;
    border: none;
    .color(theme, "base-darker");
    &:focus {
      outline: none;
      text-decoration: underline;
    }
    &:hover {
      background-color: transparent;
      border: none;
      .color(theme, "base-darkest");
    }
    label: is-plain;
  }

  @if ${plain && primary} {
    .color(theme, "primary-dark");
    &:hover {
      .color(theme, "primary-darker");
    }
    label: is-plain-primary;
  }

  @if ${plain && destructive} {
    .color(theme, "destructive-dark");
    &:hover {
      .color(theme, "destructive-darker");
    }
    label: is-plain-destructive;
  }

  @if ${plain && success} {
    .color(theme, "success-dark");
    &:hover {
      .color(theme, "success-darker");
    }
    label: is-plain-success;
  }

}