_button.scss

@mixin flexy-button-reset {
  text-decoration: none;
  margin: 0;
  outline: none;
  border: none;
  background: {
    color: transparent;
  }
  appearance: none;
  box-sizing: border-box;
  display: inline-block;
  cursor: pointer;
  padding: 0 10px;
  border-radius: 0;

  user-select: none;
  line-height: 32px;
  height: 32px;
  font-size: $flexy-typo-base-font-size;
  font-family: $flexy-font;
  @include flexy-typo-fontsize(theta);
}

@function flexy-button-active-color($color) {
  @return darken($color, 5%);
}

@function flexy-button-hover-color($color) {
  @return lighten($color, 5%);
}

@function flexy-button-color-detect($color, $dark: #000, $light: #fff) {
  @return if(lightness($color) > 55, $dark, $light);
}

@mixin flexy-button() {
  @include flexy-button-reset;
  @include flexy-colors {
    @content;
  }
}