@import '../styles/themes/themes.less';

@btnHeight: @component-size-base;
@btnPadding: @component-size-base-padding;
@btnBorderRadius: @border-radius-base;

@smallBtnHeight: @component-size-small;
@smallBtnPadding: @component-size-small-padding;
@smallBtnFontSize: @font-size-base;

@largeBtnHeight: @component-size-large;
@largeBtnPadding: @component-size-large-padding;
@largeBtnFontSize: @font-size-large;

@themeSelectors: primary, warning, success, danger;
@sizeSelectors: small, large;

.@{bk-prefix}-button {
  display: inline-flex;
  height: @btnHeight;
  padding: @btnPadding;
  font-size: @font-size-medium;
  color: @default-color;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  background-color: @white-color;
  border: 1px solid @light-gray;
  border-radius: @btnBorderRadius;
  outline: none;
  box-sizing: border-box;
  transition: background-color ease .3s;
  appearance: none;
  align-items: center;
  justify-content: center;

  each(@sizeSelectors, {
    @sizeBtnHeight: '@{value}BtnHeight';
    @sizeBtnPadding: '@{value}BtnPadding';
    @sizeBtnFontSize: '@{value}BtnFontSize';

    &.@{bk-prefix}-button-@{value} {
      height: @@sizeBtnHeight;
      padding: @@sizeBtnPadding;
      font-size: @@sizeBtnFontSize;
    }
  });

  .@{bk-prefix}-button-text {
    display: inline-flex;
    align-items: center;
    line-height: 1;
  }

  &.is-loading {
    position: relative;

    .@{bk-prefix}-button-loading {
      &:not(:last-child) {
        position: absolute;
      }
    }

    .@{bk-prefix}-button-text {
      visibility: hidden;
    }
  }

  &:hover {
    border-color: @button-default-hover-border-color;
  }

  &:active {
    color: @primary-color;
    border-color: @primary-color;
  }

  &.is-text {
    height: auto;
    padding: 0;
    font-size: inherit;
    color: @default-color;
    text-decoration: none;
    cursor: pointer;
    background-color: transparent;
    border: none;
    outline: none;
  }

  &.is-disabled {
    color: @disable-color;
    cursor: not-allowed;
    border-color: @disable-color;

    &:not(.is-text) {
      background-color: @disable-bg-color;
    }
  }

  // &.is-circle {
  //   padding: 8px;
  //   line-height: 1;
  //   border-radius: 50%;
  // }
}


.@{bk-prefix}-button-group {
  display: inline-block;
  font-size: 0;

  each(@sizeSelectors, {
    @sizeBtnHeight: '@{value}BtnHeight';
    @sizeBtnPadding: '@{value}BtnPadding';
    @sizeBtnFontSize: '@{value}BtnFontSize';

    &.@{bk-prefix}-button-group-@{value} {
      .@{bk-prefix}-button {
        height: @@sizeBtnHeight;
        padding: @@sizeBtnPadding;
        font-size: @@sizeBtnFontSize;
      }
    }
  });

  .@{bk-prefix}-button {
    height: @btnHeight;
    margin: 0 0 0 -1px;
    border-radius: 0;

    &:not(.is-disabled) {
      color: @default-color;
      background-color: @white-color;
      border-color: @light-gray;
    }

    &.is-disabled {
      color: @light-gray;
    }

    &:first-child {
      border-radius: @btnBorderRadius 0 0 @btnBorderRadius;
    }

    &:last-child {
      border-radius: 0 @btnBorderRadius @btnBorderRadius 0;
    }

    &:only-child {
      border-radius: @btnBorderRadius;
    }

    &:hover:not(.is-disabled),
    &.is-selected:not(.is-disabled) {
      position: relative;
      z-index: 1;
      color: @primary-color;
      background-color: @white-color;
      border-color: @primary-color;
    }

    &.is-selected:not(.is-disabled) {
      background-color: @button-selected-bg-color;
    }

    &.is-selected.is-disabled {
      background-color: @button-disabled-selected-bg-color;
    }

  }
}

.@{bk-prefix}-button,
.@{bk-prefix}-button-group .is-selected:not(.is-disabled) {
  each(@themeSelectors, {
    @color: '@{value}-color';
    @hoverColor: 'button-@{value}-hover-color';
    @activeColor: 'button-@{value}-active-color';

    &.@{bk-prefix}-button-@{value} {
      background-color: @@color;
      color: @white-color;
      border-color: @@color;

      &:hover {
        background-color: @@hoverColor;
        border-color: @@hoverColor;
      }

      &:active {
        background-color: @@activeColor;
        border-color: @@activeColor;
        color: @white-color;
      }

      &.is-outline {
        color: @@color;
        border-color: @@color;
        background-color: @white-color;

        &:hover {
          background-color: @@hoverColor;
          border-color: @@hoverColor;
          color: @white-color;
        }

        &:active {
          background-color: @@activeColor;
          border-color: @@activeColor;
          color: @white-color;
        }
      }

      &.is-text {
        color: @@color;
        background-color: transparent;
        border: none;

        &:not(.is-disabled):hover {
          color: @@hoverColor;
        }
      }

      &.is-disabled {
        &:not(.is-text) {
          background-color: @disable-color;
          color: @white-color;
          border-color: @disable-color;
        }

        color: @disable-color;
        cursor: not-allowed;
      }
    }

    &.@{bk-prefix}-button-hover-@{value} {
      &:hover {
        background-color: @@hoverColor;
        border-color: @@hoverColor;
        color: @white-color;
      }
    }
  })
}