@mixin button-base($c: transparent) {
  cursor: pointer;
  appearance: none;
  box-sizing: border-box;
  display: inline-block;
  background-color: transparent;
  background-image: none;
  border: 0;
  outline: 0;
  margin: 0;
  padding: 0;
  color: initial;
  text-align: center;
  
  &:link,
  &:visited,
  &:hover,
  &:focus,
  &:active {
    text-decoration: none;
  }
  &:active {
    outline: 3px solid rgba(#529ef6, 0.2);
  }
  &:disabled {
    @include button-disabled;
    opacity: 0.2;
  }
}

@mixin button-disabled {
  cursor: default;
  pointer-events: none;
}

@mixin button-loading {
  @include button-disabled;
  @include icon-loading;
  opacity: 0.2;
  
  &::before {
    margin-right: 0.6rem;
  }
}

// @include button-normal(0.6rem 1rem, #529ef6, #fff, 2px);
@mixin button-normal($p: 0.6rem 1rem, $c: #529ef6, $c-text: #fff, $r: 2px) {
  @include button-base;
  border-radius: $r;
  border: 1px solid $c;
  background-color: $c;
  color: $c-text;
  padding: $p;
  line-height: 1;

  &:focus {
    background-color: $c;
  }

  &:hover,
  &:active,
  &.is-current {
    color: $c-text;
    background-color: darken($c, 10%);
    border-color: darken($c, 10%);
  }
}

// @include button-semiflat(0.6rem 1rem, #529ef6, 10%, #fff, 2px);
@mixin button-semiflat($p: 0.6rem 1rem, $c: #529ef6, $strangth: 10%, $c-text: #fff, $r: 2px) {
  @include button-base;
  border-radius: $r;
  background-color: $c;
  background-image: linear-gradient(to top, $c, lighten($c, $strangth));
  border: 1px solid lighten($c, $strangth);
  color: $c-text;
  padding: $p;
  line-height: 1;

  &:focus {
    background-color: $c;
    background-image: linear-gradient(to top, $c, lighten($c, $strangth));
  }

  &:hover,
  &:active,
  &.is-current {
    background-color: darken($c, $strangth);
    background-image: linear-gradient(to top, darken($c, $strangth), $c);
  }
}

// @include button-outline(0.6rem 1rem, #529ef6, #fff);
@mixin button-outline($p: 0.6rem 1rem, $c: #529ef6, $c-text: #fff, $border: 1px, $r: 2px) {
  @include button-base;
  border-radius: $r;
  background-color: transparent;
  padding: $p;
  border: $border solid $c;
  color: $c;
  line-height: 1;

  &:focus {
    background-color: transparent;
    border: $border solid $c;
  }

  &:hover,
  &:active,
  &.is-current {
    background-color: $c;
    color: $c-text;
    border-color: transparet;
  }
}

// +button-emboss(0.6rem 1rem, #529ef6, #fff, 6px, 4px);
@mixin button-emboss($p: 0.6rem 1rem, $c: #529ef6, $c-text: #fff, $thickness: 6px, $r: 4px) {
  @include button-base;
  transition: all 0.05s ease-out;
  transform: translateY(-$thickness);
  box-shadow: 0 $thickness 0 darken($c, 10%);
  border-radius: $r;
  background-color: $c;
  color: $c-text;
  padding: $p;
  line-height: 1;

  &:focus {
    background-color: $c;
    box-shadow: 0 $thickness 0 darken($c, 10%);
  }

  &:hover,
  &:active,
  &.is-current {
    transform: translateY(0);
    box-shadow: 0 0 0 $c;
    background-color: darken($c, 10%);
  }
}