@use "../_layout/mixins";
.button {
  @include mixins.button();
}

.button--primary {
  @include mixins.buttonPrimary();
  &.button--inverse {
    @include mixins.buttonPrimary($inverse: true);
  }
}

.button--secondary {
  @include mixins.buttonSecondary();

  &.button--inverse {
    @include mixins.buttonSecondary($inverse: true);
  }
}

.button--small {
  @include mixins.buttonSmall();
}
.button--large {
  --button-size: var(--step-0);
}

.button--center {
  display: flex;
  margin-left: auto;
  margin-right: auto;
}

.button--wide {
  width: 100%;
}