@import "var";

/* button mixin */
.buttonSize(@width,@height,@padding,@fontSize) {
  width: @width;
  height: @height;
  line-height: @height;
  border-radius: @buttonBorderRadius;
  padding: 0 @padding;
  font-size: @fontSize;
}

/* button */
.@{uiName} {
  &-button {
    .resetButton;
    .buttonSize(100%, @buttonNormalHeight, 0, @buttonNormalFontSize);
    text-align: center;
    color: #ffffff;
    background-color:@buttonColor;
    &-normal {
      background-color: @buttonColor;
    }
    &-linear {
      border: 1px solid #b9c7d2;
      color: #98a1a8;
      background-color: #ffffff;
      &:active {
        background: rgb(243, 244, 245);
      }
    }
    &-small {
      .buttonSize(auto, @buttonSmallHeight, @buttonSmallPadding, @buttonSmallFontSize);
    }
    &-middle {
      .buttonSize(auto, @buttonMiddleHeight, @buttonMiddlePadding, @buttonMiddleFontSize);
    }
    &-large {
      .buttonSize(100%, @buttonLargeHeight, 0, @buttonLargeFontSize);
    }
    &.is-disabled {
      pointer-events: none;
      color: #98a1a8;
      background: #DCE1E7;
    }
    &:not(.is-disable):active {
      opacity: 0.5;
    }
  }
}