/**
* Buttons
*/
@mixin button() {
  display: inline-block;
  cursor: pointer;
  border: 1px solid transparent;
  padding: $btnPadding;
  border-radius: $btnRadius;
  font-weight: $btnFontWeight;
  background-image: none;
  transition: background-color $globalShortEaseTime ease, background-image 2s ease,
  color $globalShortEaseTime ease, border $globalShortEaseTime ease;
  background-size: $btnBackgroundSize;
  font-size: $btnFontSize;
  will-change: background, background-image;
  line-height:$baseLineHeight;
  &:active, &:focus {
    outline: none;
  }
  > * {
    pointer-events: none;
  }

  // repeat, because some browser to not respect this settings on input elements
  @include font-smoothing();

  @include button-style($buttonColor, $btnPrimaryColor);

  &.block {
    text-align: center;
    display: block;
    width: 100%;
  }

  &.action {
    padding-right: 11px;
    padding-left: 11px;
    text-align: center;
  }

  &.small {
    font-size: $smallFontSize;
    padding: $btnSmallPadding;

    &.action {
      padding-left: 7px;
      padding-right: 7px;
    }
  }

  &.mini {
    font-size: $smallFontSize;
    padding: 5px 10px;
  }

  // Other colors:
  &.secondary {
    @include button-style($buttonColor, $btnSecondaryColor);
  }

  &.danger {
    @include button-style($buttonColor, $btnDangerColor);
  }

  &.alternative {
    @include button-style($buttonColor, $btnAlternativeColor);
  }

  &.loading {
    position: relative;
    @include loadingContainer();
  }

  &.loadMoreButton {
    margin-top: 2rem;
    padding-right: 85px;
    padding-left: 85px;
  }

  @include interface();
}

@if $executeDefaultMixins {
  .button {
    @include button();
  }
}