// mixins for button
// ------------------------
.yee-button-size(@yee-height; @yee-padding; @yee-font-size; @yee-border-radius) {
  height: @yee-height;
  padding: @yee-padding;
  font-size: @yee-font-size;
  border-radius: @yee-border-radius;
}

.yee-button-disabled(@yee-color: @yee-btn-disable-color; @yee-background: @yee-btn-disable-bg; @yee-border: @yee-btn-disable-border) {
  &-disabled,
  &.disabled,
  &[disabled] {
    &,
    &:hover,
    &:focus,
    &:active,
    &.active {
      .yee-button-color(@yee-color; @yee-background; @yee-border);

      text-shadow: none;
      box-shadow: none;
    }
  }
}

.yee-button-variant-primary(@yee-color; @yee-background) {
  .yee-button-color(@yee-color; @yee-background; @yee-background);

  text-shadow: @yee-btn-text-shadow;
  box-shadow: @yee-btn-primary-shadow;

  &:hover,
  &:focus {
    .yee-button-color(
      @yee-color; ~`yeeColorPalette('@{yee-background}', 5) `; ~`yeeColorPalette('@{yee-background}', 5) `
    );
  }

  &:active,
  &.active {
    .yee-button-color(
      @yee-color; ~`yeeColorPalette('@{yee-background}', 7) `; ~`yeeColorPalette('@{yee-background}', 7) `
    );
  }

  .yee-button-disabled();
}

.yee-button-variant-other(@yee-color; @yee-background; @yee-border) {
  .yee-button-color(@yee-color; @yee-background; @yee-border);

  &:hover,
  &:focus {
    .yee-button-color(
      ~`yeeColorPalette('@{yee-btn-primary-bg}', 5) `; @yee-background; ~`yeeColorPalette('@{yee-btn-primary-bg}', 5)
        `
    );
  }
  &:active,
  &.active {
    .yee-button-color(
      ~`yeeColorPalette('@{yee-btn-primary-bg}', 7) `; @yee-background; ~`yeeColorPalette('@{yee-btn-primary-bg}', 7)
        `
    );
  }
  .yee-button-disabled();
}
.yee-button-variant-ghost(@yee-color; @yee-border: @yee-color) {
  .yee-button-color(@yee-color; transparent; @yee-border);
  text-shadow: none;
  &:hover,
  &:focus {
    & when (@yee-border = transparent) {
      .yee-button-color(~`yeeColorPalette('@{yee-color}', 5) `; transparent; transparent);
    }
    & when not(@yee-border = transparent) {
      .yee-button-color(~`yeeColorPalette('@{yee-color}', 5) `; transparent; ~`yeeColorPalette('@{yee-color}', 5) `);
    }
  }
  &:active,
  &.active {
    & when (@yee-border = transparent) {
      .yee-button-color(~`yeeColorPalette('@{yee-color}', 7) `; transparent; transparent);
    }
    & when not(@yee-border = transparent) {
      .yee-button-color(~`yeeColorPalette('@{yee-color}', 7) `; transparent; ~`yeeColorPalette('@{yee-color}', 7) `);
    }
  }
  .yee-button-disabled();
}
.yee-button-color(@yee-color; @yee-background; @yee-border) {
  color: @yee-color;
  background-color: @yee-background;
  border-color: @yee-border;
  // a inside Button which only work in Chrome
  // http://stackoverflow.com/a/17253457
  > a:only-child {
    color: currentColor;
    &::after {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: transparent;
      content: '';
    }
  }
}
.yee-button-group-base(@yee-btnClassName) {
  position: relative;
  display: inline-flex;
  > .@{yee-btnClassName},
  > span > .@{yee-btnClassName} {
    position: relative;
    &:hover,
    &:focus,
    &:active,
    &.active {
      z-index: 2;
    }
    &:disabled {
      z-index: 0;
    }
  }
  > .@{yee-btnClassName}-icon-only {
    font-size: @yee-font-size-base;
  }
  // size
  &-lg > .@{yee-btnClassName},
  &-lg > span > .@{yee-btnClassName} {
    .yee-button-size(@yee-btn-height-lg; @yee-btn-padding-lg; @yee-btn-font-size-lg; 0);
    line-height: @yee-btn-height-lg - 2px;
  }
  &-lg > .@{yee-btnClassName}.@{yee-btnClassName}-icon-only {
    .yee-square(@yee-btn-height-lg);
    padding-right: 0;
    padding-left: 0;
  }
  &-sm > .@{yee-btnClassName},
  &-sm > span > .@{yee-btnClassName} {
    .yee-button-size(@yee-btn-height-sm; @yee-btn-padding-sm; @yee-font-size-base; 0);
    line-height: @yee-btn-height-sm - 2px;
    > .@{yee-iconfont-css-prefix} {
      font-size: @yee-font-size-base;
    }
  }
  &-sm > .@{yee-btnClassName}.@{yee-btnClassName}-icon-only {
    .yee-square(@yee-btn-height-sm);
    padding-right: 0;
    padding-left: 0;
  }
}
// Base styles of buttons
// --------------------------------------------------
.yee-btn() {
  position: relative;
  display: inline-block;
  font-weight: @yee-btn-font-weight;
  white-space: nowrap;
  text-align: center;
  background-image: none;
  border: @yee-btn-border-width @yee-btn-border-style transparent;
  box-shadow: @yee-btn-shadow;
  cursor: pointer;
  transition: all 0.3s @yee-ease-in-out;
  user-select: none;
  touch-action: manipulation;
  .yee-button-size(@yee-btn-height-base; @yee-btn-padding-base; @yee-font-size-base; @yee-btn-border-radius-base);
  > .@{yee-iconfont-css-prefix} {
    line-height: 1;
  }
  &,
  &:active,
  &:focus {
    outline: 0;
  }
  &:not([disabled]):hover {
    text-decoration: none;
  }
  &:not([disabled]):active {
    outline: 0;
    box-shadow: none;
  }
  &.disabled,
  &[disabled] {
    cursor: not-allowed;
    > * {
      pointer-events: none;
    }
  }
  &-lg {
    .yee-button-size(@yee-btn-height-lg; @yee-btn-padding-lg; @yee-btn-font-size-lg; @yee-btn-border-radius-base);
  }
  &-sm {
    .yee-button-size(@yee-btn-height-sm; @yee-btn-padding-sm; @yee-btn-font-size-sm; @yee-btn-border-radius-sm);
  }
}
// primary button style
.yee-btn-primary() {
  .yee-button-variant-primary(@yee-btn-primary-color; @yee-btn-primary-bg);
}
// default button style
.yee-btn-default() {
  .yee-button-variant-other(@yee-btn-default-color; @yee-btn-default-bg; @yee-btn-default-border);
  &:hover,
  &:focus,
  &:active,
  &.active {
    text-decoration: none;
    background: @yee-btn-default-bg;
  }
}
// ghost button style
.yee-btn-ghost() {
  .yee-button-variant-other(@yee-btn-ghost-color, @yee-btn-ghost-bg, @yee-btn-ghost-border);
}
// dashed button style
.yee-btn-dashed() {
  .yee-button-variant-other(@yee-btn-default-color, @yee-btn-default-bg, @yee-btn-default-border);
  border-style: dashed;
}
// danger button style
.yee-btn-danger() {
  .yee-button-variant-primary(@yee-btn-danger-color, @yee-btn-danger-bg);
}
// link button style
.yee-btn-link() {
  .yee-button-variant-other(@yee-link-color, transparent, transparent);
  box-shadow: none;
  &:hover,
  &:focus,
  &:active {
    border-color: transparent;
  }
  .yee-button-disabled(@yee-disabled-color; transparent; transparent);
}
// round button
.yee-btn-round(@yee-btnClassName: btn) {
  .yee-button-size(@yee-btn-circle-size; 0 @yee-btn-circle-size / 2; @yee-font-size-base; @yee-btn-circle-size);
  &.@{yee-btnClassName}-lg {
    .yee-button-size(
      @yee-btn-circle-size-lg; 0 @yee-btn-circle-size-lg / 2; @yee-btn-font-size-lg; @yee-btn-circle-size-lg
    );
  }
  &.@{yee-btnClassName}-sm {
    .yee-button-size(
      @yee-btn-circle-size-sm; 0 @yee-btn-circle-size-sm / 2; @yee-font-size-base; @yee-btn-circle-size-sm
    );
  }
}
// square button: the content only contains icon
.yee-btn-square(@yee-btnClassName: btn) {
  .yee-square(@yee-btn-square-size);
  .yee-button-size(@yee-btn-square-size; 0; @yee-font-size-base + 2px; @yee-btn-border-radius-base);
  &.@{yee-btnClassName}-lg {
    .yee-square(@yee-btn-square-size-lg);
    .yee-button-size(@yee-btn-square-size-lg; 0; @yee-btn-font-size-lg + 2px; @yee-btn-border-radius-base);
  }
  &.@{yee-btnClassName}-sm {
    .yee-square(@yee-btn-square-size-sm);
    .yee-button-size(@yee-btn-square-size-sm; 0; @yee-font-size-base; @yee-btn-border-radius-base);
  }
}
// circle button: the content only contains icon
.yee-btn-circle(@yee-btnClassName: btn) {
  min-width: @yee-btn-height-base;
  padding-right: 0;
  padding-left: 0;
  text-align: center;
  border-radius: 50%;
  &.@{yee-btnClassName}-lg {
    min-width: @yee-btn-height-lg;
    border-radius: 50%;
  }
  &.@{yee-btnClassName}-sm {
    min-width: @yee-btn-height-sm;
    border-radius: 50%;
  }
}
// Horizontal button groups style
// --------------------------------------------------
.yee-btn-group(@yee-btnClassName: btn) {
  .yee-button-group-base(@yee-btnClassName);
  .@{yee-btnClassName} + .@{yee-btnClassName},
  .@{yee-btnClassName} + &,
  span + .@{yee-btnClassName},
  .@{yee-btnClassName} + span,
  > span + span,
  & + .@{yee-btnClassName},
  & + & {
    margin-left: -1px;
  }
  .@{yee-btnClassName}-primary + .@{yee-btnClassName}:not(.@{yee-btnClassName}-primary):not([disabled]) {
    border-left-color: transparent;
  }
  .@{yee-btnClassName} {
    border-radius: 0;
  }
  > .@{yee-btnClassName}:first-child,
  > span:first-child > .@{yee-btnClassName} {
    margin-left: 0;
  }
  > .@{yee-btnClassName}:only-child {
    border-radius: @yee-btn-border-radius-base;
  }
  > span:only-child > .@{yee-btnClassName} {
    border-radius: @yee-btn-border-radius-base;
  }
  > .@{yee-btnClassName}:first-child:not(:last-child),
  > span:first-child:not(:last-child) > .@{yee-btnClassName} {
    border-top-left-radius: @yee-btn-border-radius-base;
    border-bottom-left-radius: @yee-btn-border-radius-base;
  }
  > .@{yee-btnClassName}:last-child:not(:first-child),
  > span:last-child:not(:first-child) > .@{yee-btnClassName} {
    border-top-right-radius: @yee-btn-border-radius-base;
    border-bottom-right-radius: @yee-btn-border-radius-base;
  }
  &-sm {
    > .@{yee-btnClassName}:only-child {
      border-radius: @yee-btn-border-radius-sm;
    }
    > span:only-child > .@{yee-btnClassName} {
      border-radius: @yee-btn-border-radius-sm;
    }
    > .@{yee-btnClassName}:first-child:not(:last-child),
    > span:first-child:not(:last-child) > .@{yee-btnClassName} {
      border-top-left-radius: @yee-btn-border-radius-sm;
      border-bottom-left-radius: @yee-btn-border-radius-sm;
    }
    > .@{yee-btnClassName}:last-child:not(:first-child),
    > span:last-child:not(:first-child) > .@{yee-btnClassName} {
      border-top-right-radius: @yee-btn-border-radius-sm;
      border-bottom-right-radius: @yee-btn-border-radius-sm;
    }
  }
  & > & {
    float: left;
  }
  & > &:not(:first-child):not(:last-child) > .@{yee-btnClassName} {
    border-radius: 0;
  }
  & > &:first-child:not(:last-child) {
    > .@{yee-btnClassName}:last-child {
      padding-right: 8px;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }
  & > &:last-child:not(:first-child) > .@{yee-btnClassName}:first-child {
    padding-left: 8px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}