.tetra-button (@button) {
  @bgColor: ~"";
  @hoverColor: ~"";
  @borderColor: ~"";
  @textColor: ~"";
  @disabledTextColor: ~"";
  .set-color (@button) when (@button = default) {
    @bgColor : @buttonDefaultBgColor;
    @hoverColor: @buttonDefaultHoverColor;
    @borderColor: @buttonDefaultBorderColor;
    @textColor:   @buttonDefaultTextColor;
    @disabledTextColor: @buttonDefaultDisabledTextColor;
  }
  .set-color (@button) when (@button = primary) {
    @bgColor : @buttonPrimaryBgColor;
    @hoverColor: @buttonPrimaryHoverColor;
    @borderColor: @buttonPrimaryBorderColor;
    @textColor:   @buttonPrimaryTextColor;
    @disabledTextColor: @buttonPrimaryDisabledTextColor;
  }
  .set-color (@button) when (@button = secondary) {
    @bgColor : @buttonSecondaryBgColor;
    @hoverColor: @buttonSecondaryHoverColor;
    @borderColor: @buttonSecondaryBorderColor;
    @textColor:   @buttonSecondaryTextColor;
    @disabledTextColor: @buttonSecondaryDisabledTextColor;
  }
  .set-color (@button) when (@button = tertiary) {
    @bgColor : @buttonTerBgColor;
    @hoverColor: @buttonTerHoverColor;
    @borderColor: @buttonTerBorderColor;
    @textColor:   @buttonTerTextColor;
    @disabledTextColor: @buttonTerDisabledTextColor;
  }
  .set-color(@button);
  color: @textColor;
  > .vicon { color: @textColor; }
  border: 1px solid @borderColor;
  background: @bgColor;
  .vicon {
    color: @textColor;
  }
  &:hover,
  &:focus {
    background: @hoverColor;
    color: @textColor;
    border-color: @hoverColor;
    .vicon, span {
      color: @textColor;
    }
  }
  &:active {
    background: @bgColor;
  }
  &.btn-loading,
  &.btn-loading:hover,
  &.btn-loading:focus,
  &.btn-disabled,
  &.btn-disabled:hover,
  &.btn-disabled:focus {
    background: @bgColor;
    border-color: @bgColor;
    color: @disabledTextColor;
    opacity: 0.5;
    > span, .vicon {
      color: @disabledTextColor;
    }
  }

  &.btn-inactive,
  &.btn-inactive:hover,
  &.btn-loading:focus {
    border-color: @borderColor;
    background-color: @bgColor;
  }
}

.alt-tetra-button (@button) {
  @bgColor: ~"";
  @hoverColor: ~"";
  @hoverTextColor: ~"";
  @borderColor: ~"";
  @textColor: ~"";
  @disabledTextColor: ~"";
  .set-color (@button) when (@button = default) {
    @bgColor : @altButtonDefaultBgColor;
    @hoverColor: @altButtonDefaultHoverColor;
    @hoverTextColor : @altButtonDefaultHoverTextColor;
    @borderColor: @altButtonDefaultBorder;
    @textColor:   @altButtonDefaultTextColor;
    @disabledTextColor: @altButtonDefaultDisabledTextColor;
  }
  .set-color (@button) when (@button = primary) {
    @bgColor : @altButtonPrimaryBgColor;
    @hoverColor: @altButtonPrimaryHoverColor;
    @hoverTextColor : @altButtonPrimaryHoverTextColor;
    @borderColor: @altButtonPrimaryBorder;
    @textColor:   @altButtonPrimaryTextColor;
    @disabledTextColor: @altButtonPrimaryDisabledTextColor;
  }
  .set-color (@button) when (@button = secondary) {
    @bgColor : @altButtonSecondaryBgColor;
    @hoverColor: @altButtonSecondaryHoverColor;
    @hoverTextColor : @altButtonSecondaryHoverTextColor;
    @borderColor: @altButtonSecondaryBorder;
    @textColor:   @altButtonSecondaryTextColor;
    @disabledTextColor: @altButtonSecondaryDisabledTextColor;
  }
  .set-color (@button) when (@button = tertiary) {
    @bgColor : @altButtonTerBgColor;
    @hoverColor: @altButtonTerHoverColor;
    @hoverTextColor : @altButtonTerHoverTextColor;
    @borderColor: @altButtonTerBorder;
    @textColor:   @altButtonTerTextColor;
    @disabledTextColor: @altButtonTerDisabledTextColor;
  }
  .set-color (@button) when (@button = wht) {
    @bgColor : @altButtonWhiteBgColor;
    @hoverColor: @altButtonWhiteHoverColor;
    @hoverTextColor : @altButtonWhiteHoverTextColor;
    @borderColor: @altButtonWhiteBorder;
    @textColor:   @altButtonWhiteTextColor;
    @disabledTextColor: @altButtonWhiteDisabledTextColor;
  }
  .set-color(@button);
  color: @textColor;
  .vicon { color: @textColor; }
  border: 1px solid @borderColor;
  background: @bgColor;
  .vicon {
    color: @textColor;
  }
  &:hover,
  &:focus,
  &:active {
    background: @hoverColor;
    color: @hoverTextColor;
    border-color : @borderColor;
    .vicon {
      color: @hoverTextColor;
    }
  }
  &:active {
    border-color : darken(@borderColor, 10%);
  }

  &.btn-loading,
  &.btn-loading:hover,
  &.btn-loading:focus,
  &.btn-disabled,
  &.btn-disabled:hover,
  &.btn-disabled:focus {
    background: @bgColor;
    border-color: @borderColor;
    color: @disabledTextColor;
    opacity: 0.5;
    > span, .vicon {
      color: @disabledTextColor;
    }
  }

  &.btn-inactive,
  &.btn-inactive:hover {
    border-color: @borderColor;
    background-color: @bgColor;
  }
}


.btn, .core-form .btn {
  transition-property: border, background, color;
  transition-duration: .2s;
  transition-timing-function: ease;
  .vicon {
    transition-property: color;
    transition-duration: .2s ease;
  }

  // Rules
  font-weight: 300;
  display: inline-block;
  vertical-align: middle;
  zoom: 1;
  padding: 4px @buttonDefaultBorderRadius*1.2;
  .border-radius(@buttonDefaultBorderRadius);
  position: relative;
  text-decoration: none;
  text-shadow: none;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  box-shadow: none;
  .user-select(none);

  &:hover, &:focus {
    text-decoration: none;
  }

  // Support for old layout
  span {
    input, button {
      display:inline;
      border:none;
      padding:0;
      line-height: @baseLineHeight;
      background:none;
      text-align:center;
      margin:0;
      cursor:pointer;
      font-family:inherit;
      font-size:inherit !important;
    }
    img {
      vertical-align: text-top;
    }
  }

  // Icon font

  .vicon.btn-icon-before,
  .vicon.btn-icon-after {
    font-size: 9px;
    line-height: 1;
  }
  .vicon.btn-icon-before {
    .margin-left(@rtl, -4px);
    .margin-right(@rtl, 4px);
  }
  .vicon.btn-icon-after {
    .margin-left(@rtl, 4px);
    .margin-right(@rtl, -4px);
  }
}

.btn-default,
.secEventsAction,
.core-form .btn-default {
  .tetra-button(default);
}

.btn-primary,
.socialAction,
.eventsAction,
.core-form .btn-primary {
  .tetra-button(primary);
}

.btn-secondary,
.core-form .btn-secondary {
  .tetra-button(secondary);
}

.btn-tertiary {
  .tetra-button(tertiary);
}

.btn-default-alt {
  .alt-tetra-button(default);
}
.btn-primary-alt {
  .alt-tetra-button(primary);
}
.btn-secondary-alt {
  .alt-tetra-button(secondary);
}
.btn-tertiary-alt {
  .alt-tetra-button(tertiary);
}
.btn-white-alt{
  .alt-tetra-button(wht);
}

.btn-small, .core-form .btn-small {
  padding: 2px @buttonSmallBorderRadius*1.2;
  .border-radius(@buttonSmallBorderRadius);
  font-size: 11px;
  font-weight: 300;
}

.btn-large, .core-form .btn-large {
  padding: 7px @buttonLargeBorderRadius*1.2;
  .border-radius(@buttonLargeBorderRadius);
  font-size: 13px;
  font-weight: 400;
  .vicon.btn-icon-before,
  .vicon.btn-icon-after {
    font-size: 10px;
  }
}

.btn-lead, .core-form .btn-lead {
  .vicon.btn-icon-before,
  .vicon.btn-icon-after {
    font-size: 12px;
  }
}

.btn-fat, .core-form .btn-fat {
  .vicon.btn-icon-before,
  .vicon.btn-icon-after {
    font-size: 14px;
  }
}


.btn-lead, .core-form .btn-lead {
  position: relative;
  z-index: 2;
  padding: 10px @buttonLeadBorderRadius*1.2;
  font-size: 16px;
  font-weight: 400;
  .border-radius(@buttonLeadBorderRadius);
  .vicon.btn-icon-before,
  .vicon.btn-icon-after {
  }
}

.btn-lead-alt, .core-form .btn-lead-alt {
  position: relative;
  z-index: 2;
  padding: 10px @buttonLeadBorderRadius*1.2;
  font-size: 16px;
  font-weight: 400;
  border-width: 2px;
  .border-radius(@buttonLeadBorderRadius);
  .vicon.btn-icon-before,
  .vicon.btn-icon-after {
    font-size: 9px;
  }
}

.btn-fat, .core-form .btn-fat{
  position: relative;
  z-index: 2;
  padding: 15px @buttonFatBorderRadius*1.8;
  font-size: 20px;
  font-weight: 400;
  border-width: 2px;
  .border-radius(@buttonFatBorderRadius);
  .vicon.btn-icon-before,
  .vicon.btn-icon-after {
  }
}

.btn-desc {
  display: inline-block;

  dt {
    text-align: center;
    font-size: (@baseFontSize * .9);
    color: @gray;
  }
}

.btn-inactive,
.btn-inactive:hover,
.btn-loading:focus,
.btn-disabled,
.btn-disabled:hover,
.btn-disabled:focus,
.btn-disabled:active,
.btn-loading,
.btn-loading:hover,
.btn-loading:focus,
.btn-loading:active {
  cursor: default;
}

.btn-loading,
.btn-loading:hover,
.btn-loading:focus,
.btn-loading:active {
  span {
   display: inline-block;
   overflow: hidden;
   height: 0;
   padding: 1em 0 0 0;
   background: transparent url("@{img-buttons-dir}/loaders/default.gif") no-repeat 50% 0.3em;
  }
}

.btn-append {
  .border-radius-left(@rtl, 0);
  .border-radius-right(@rtl, @buttonDefaultBorderRadius);
  .padding-right(@rtl, 4px);
  .padding-left(@rtl, 0);
  .margin-left(@rtl, -@buttonDefaultBorderRadius*0.95);
  &.btn-small {
    .border-radius-right(@rtl, @buttonSmallBorderRadius);
    .margin-left(@rtl, -@buttonSmallBorderRadius);
  }
  &.btn-large {
    .border-radius-right(@rtl, @buttonLargeBorderRadius);
    .margin-left(@rtl, -@buttonLargeBorderRadius*0.9);
  }
  &.btn-lead {
    .border-radius-right(@rtl, @buttonLeadBorderRadius);
    .margin-left(@rtl, -@buttonLeadBorderRadius*0.7);
  }
  &.btn-fat {
    .border-radius-right(@rtl, @buttonFatBorderRadius);
    .margin-left(@rtl, -@buttonFatBorderRadius*0.7);
  }
}

.btn-icon {
  padding: 8px 9px;
  border-radius: 100%;
  .vicon {
    font-size: 14px;
    margin: 0;
    vertical-align: top;
  }
}

.btn-link {
  background: none;
  color: @linkColor;
  text-decoration: none;
  cursor: pointer;
  &:hover,
  &:focus {
    text-decoration: underline;
    color: @linkColorHover;
  }
}

.btn-pagination {
  .padding (@rtl, (@spacingXs + 1), 13px, (@spacingXs + 1), 13px);
  font-size: (@baseFontSize + 3);
  color: @grayDark;
  background: transparent;
  font-weight: 400;

  .vicon {
    color: @grayDark;

    &.btn-icon-after,
    &.btn-icon-before {
      position: relative;
    }

    &.btn-icon-after {
      .margin (@rtl, 0, -@spacingXs, 0, @spacingXs);
    }
    &.btn-icon-before {
      .margin (@rtl, 0, @spacingXs, 0, -@spacingXs);
    }
  }

  &:hover,
  &:focus {
    background: tint(@linkColor, 20%);
    color: @white;
    box-shadow: none;

    .vicon {
      color: @white;
    }
  }

  &:active {
    background: @linkColor;
  }
}