@mixin et-button-icon-position() {
  &.et-icon-position-left {
    i {
      margin-right: 10px;
    }
  }
  &.et-icon-position-right {
    i {
      margin-left: 10px;
    }
  }
}

@mixin et-button($backgroundColor, $borderColor, $fontColor, $hoverBackgroundColor, $hoverBorderColor, $hoverFontColor, $activeBackgroundColor, $activeBorderColor, $activeFontColor, $disabledBackgroundColor, $disabledBorderColor, $disabledFontColor) {
  box-shadow: 1px 3px 6px $colorBoxShadow;
  background-color: $backgroundColor;
  border-color: $borderColor;
  color: $fontColor;
  &:not(:disabled):not(.disabled):not(.et-hover-underline):hover {
    box-shadow: none;
    background-color: $hoverBackgroundColor;
    border-color: $hoverBorderColor;
    color: $hoverFontColor;
  }
  &:not(:disabled):not(.disabled).et-hover-colorUnderline:hover {
    text-decoration: underline;
  }
  &:not(:disabled):not(.disabled).et-hover-underline:hover {
    box-shadow: none;
    background-color: $backgroundColor;
    border-color: $borderColor;
    color: $fontColor;
    text-decoration: underline;
  }
  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active,
  &:not(:disabled):not(.disabled):focus,
  .show > &.dropdown-toggle {
    box-shadow: none;
    background-color: $activeBackgroundColor;
    border-color: $activeBorderColor;
    color: $activeFontColor;
  }
  &:disabled, &.disabled {
    box-shadow: none;
    background-color: $disabledBackgroundColor;
    border-color: $disabledBorderColor;
    color: $disabledFontColor;
  }
  @include et-button-icon-position();
}

@mixin et-button-outline($borderFontColor, $hoverBorderFontColor, $activeBorderFontColor, $disabledBorderFontColor) {
  box-shadow: 1px 3px 6px $colorBoxShadow;
  background-color: $colorContentBackground;
  border-color: $borderFontColor;
  color: $borderFontColor;
  &:not(:disabled):not(.disabled):not(.et-hover-underline):hover {
    box-shadow: none;
    background-color: $colorContentBackground;
    border-color: $hoverBorderFontColor;
    color: $hoverBorderFontColor;
  }
  &:not(:disabled):not(.disabled).et-hover-colorUnderline:hover {
    text-decoration: underline;
  }
  &:not(:disabled):not(.disabled).et-hover-underline:hover {
    box-shadow: none;
    background-color: $colorContentBackground;
    border-color: $borderFontColor;
    color: $borderFontColor;
    text-decoration: underline;
  }
  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active,
  &:not(:disabled):not(.disabled):focus,
  .show > &.dropdown-toggle {
    box-shadow: none;
    background-color: $colorContentBackground;
    border-color: $activeBorderFontColor;
    color: $activeBorderFontColor;
  }
  &:disabled, &.disabled {
    box-shadow: none;
    background-color: $colorContentBackground;
    border-color: $disabledBorderFontColor;
    color: $disabledBorderFontColor;
  }
  @include et-button-icon-position();
}