.#{$ns}Button {
  display: inline-block;
  font-weight: var(--Button-fontWeight);
  text-align: center;
  vertical-align: middle;
  user-select: none;
  letter-spacing: 1px;
  background: transparent;
  border: var(--Button-borderWidth) solid transparent;
  transition: var(--Button-transition);
  white-space: nowrap;
  min-width: var(--Button-mimWidth);

  @media screen and (min-width:1280px) and (max-width:1440px) {
    height: 1.2rem;
    line-height: 0.9rem;
    font-size: 0.75rem;
    padding: .1rem .25rem;
  }

  @media screen and (min-width:1441px) and (max-width:1680px) {
    height: 1.5rem;
    line-height: 1.2rem;
    font-size: 0.75rem;
    padding: 0.1rem 0.25rem
  }

  &:active,
  &.is-active {
    color: var(--Button-onActive-color);
    box-shadow: var(--Button-onActive-boxShadow);
    border-color: var(--Button-onActive-border);

    &:focus {
      box-shadow: var(--Button-onActive-boxShadow);
    }
  }

  &.in-state {
    color: var(--Button-onActive-color);
    box-shadow: var(--Button-onActive-boxShadow);
    border-color: var(--Button-onActive-border);
  }

  @include button-size(var(--Button-paddingY),
    var(--Button-paddingX),
    var(--Button-fontSize),
    var(--Button-lineHeight),
    var(--Button-borderRadius),
    var(--Button-height));

  @include hover-focus {
    // color: var(--text-color);
    text-decoration: none;
  }

  &:focus,
  &.focus {
    outline: 0;
    box-shadow: var(--Button-onFocus-boxShadow);
  }

  &.is-disabled,
  &:disabled {
    // opacity: var(--Button-onDisabled-opacity);
    filter: grayscale(100%);
    box-shadow: none;
    cursor: not-allowed;
    color: var(--saas-Disable-Text);
    pointer-events: auto;
    border: var(--Button-borderWidth) solid var(--saas-Button-Disabled);
    background: var(--saas-Button-Disabled);

    &>svg,
    &>svg path {
      fill: currentColor;
    }
  }

  &:not(:disabled):not(.is-disabled) {
    cursor: pointer;
  }

  &.cxd-Button--link.is-disabled {
    background: transparent;
    border: none;
  }

  >.pull-left,
  >.pull-right {
    line-height: inherit;
  }

  >.fa,
  >.iconfont,
  >.glyphicon {
    font-size: inherit;
  }
}

a.#{$ns}Button.is-disabled,
fieldset:disabled a.#{$ns}Button {
  pointer-events: none;
}

.#{$ns}Button--primary {
  @include button-variant(var(--saas-Primary-Color),
    var(--Button--primary-border),
    var(--Button--primary-color),
    var(--Button--primary-onHover-bg),
    var(--Button--primary-onHover-border),
    var(--Button--primary-onHover-color),
    var(--Button--primary-onActive-bg),
    var(--Button--primary-onActive-border),
    var(--Button--primary-onActive-color));
}

@media screen and (max-width:767px) {
  .#{$ns}Button--primary {
    background: var(--saas-Primary-Color);
    border-color: var(--saas-Primary-Color);
    border-radius: 4px;
  }
}

.#{$ns}Button--secondary {
  @include button-variant(var(--Button--secondary-bg),
    var(--Button--secondary-border),
    var(--Button--secondary-color),
    var(--Button--secondary-onHover-bg),
    var(--Button--secondary-onHover-border),
    var(--Button--secondary-onHover-color),
    var(--Button--secondary-onActive-bg),
    var(--Button--secondary-onActive-border),
    var(--Button--secondary-onActive-color));
}

.#{$ns}Button--success {
  @include button-variant(var(--saas-Success-Color),
    var(--Button--success-border),
    var(--Button--success-color),
    var(--Button--success-onHover-bg),
    var(--Button--success-onHover-border),
    var(--Button--success-onHover-color),
    var(--Button--success-onActive-bg),
    var(--Button--success-onActive-border),
    var(--Button--success-onActive-color));
}

.#{$ns}Button--enhance {
  @include button-variant(var(--Button--enhance-bg),
    var(--Button--enhance-border),
    var(--Button--enhance-color),
    var(--Button--enhance-onHover-bg),
    var(--Button--enhance-onHover-border),
    var(--Button--enhance-onHover-color),
    var(--Button--enhance-onActive-bg),
    var(--Button--enhance-onActive-border),
    var(--Button--enhance-onActive-color));
}

.#{$ns}Button--info {
  @include button-variant(var(--saas-Info-Color),
    var(--saas-Info-Color),
    var(--Button--info-color),
    var(--Button--info-onHover-bg),
    var(--Button--info-onHover-border),
    var(--Button--info-onHover-color),
    var(--Button--info-onActive-bg),
    var(--Button--info-onActive-border),
    var(--Button--info-onActive-color));
}

.#{$ns}Button--warning {
  @include button-variant(var(--saas-Warning-Color),
    var(--Button--warning-border),
    var(--Button--warning-color),
    var(--Button--warning-onHover-bg),
    var(--Button--warning-onHover-border),
    var(--Button--warning-onHover-color),
    var(--Button--warning-onActive-bg),
    var(--Button--warning-onActive-border),
    var(--Button--warning-onActive-color));
}

.#{$ns}Button--danger {
  @include button-variant(var(--saas-Error-Color),
    var(--Button--danger-border),
    var(--Button--danger-color),
    var(--Button--danger-onHover-bg),
    var(--Button--danger-onHover-border),
    var(--Button--danger-onHover-color),
    var(--Button--danger-onActive-bg),
    var(--Button--danger-onActive-border),
    var(--Button--danger-onActive-color));
}

.#{$ns}Button--light {
  @include button-variant(var(--saas-Light-Color),
    var(--Button--light-border),
    var(--Button--light-color),
    var(--Button--light-onHover-bg),
    var(--Button--light-onHover-border),
    var(--Button--light-onHover-color),
    var(--Button--light-onActive-bg),
    var(--Button--light-onActive-border),
    var(--Button--light-onActive-color));
}

.#{$ns}Button--dark {
  @include button-variant(var(--saas-Dark-Color),
    var(--Button--dark-border),
    var(--Button--dark-color),
    var(--Button--dark-onHover-bg),
    var(--Button--dark-onHover-border),
    var(--Button--dark-onHover-color),
    var(--Button--dark-onActive-bg),
    var(--Button--dark-onActive-border),
    var(--Button--dark-onActive-color));
}

.#{$ns}Button--default {
  @include button-variant(var(--Button--default-bg),
    var(--Button--default-border),
    var(--Button--default-color),
    var(--Button--default-onHover-bg),
    var(--Button--default-onHover-border),
    var(--Button--default-onHover-color),
    var(--Button--default-onActive-bg),
    var(--Button--default-onActive-border),
    var(--Button--default-onActive-color));
}

.#{$ns}Button--xs {
  @include button-size(var(--Button--xs-paddingY),
    var(--Button--xs-paddingX),
    var(--Button--xs-fontSize),
    var(--Button--xs-lineHeight),
    var(--Button--sm-borderRadius),
    var(--Button--xs-height));

  &.#{$ns}Button--iconOnly {
    min-width: calc(var(--Button--xs-height) * var(--Button--iconOnly-minWidthRate));
  }
}

.#{$ns}Button--sm {
  @include button-size(var(--Button--sm-paddingY),
    var(--Button--sm-paddingX),
    var(--Button--sm-fontSize),
    var(--Button--sm-lineHeight),
    var(--Button--sm-borderRadius),
    var(--Button--sm-height));

  @media screen and (min-width:1280px) and (max-width:1440px) {
    padding: 0rem .5625rem;
    height: 1.2rem;
    line-height: 1.2rem;
  }

  @media screen and (min-width:1441px) and (max-width:1680px) {
    padding: 0rem 0.6rem;
    height: 1.5rem;
    line-height: 1.3rem;
  }

  &.#{$ns}Button--iconOnly {
    min-width: calc(var(--Button--sm-height) * var(--Button--iconOnly-minWidthRate));
  }
}

.#{$ns}Button--md {
  @include button-size(var(--Button--md-paddingY),
    var(--Button--md-paddingX),
    var(--Button--md-fontSize),
    var(--Button--md-lineHeight),
    var(--Button-borderRadius),
    var(--Button--md-height));

  &.#{$ns}Button--iconOnly {
    min-width: calc(var(--Button--md-height) * var(--Button--iconOnly-minWidthRate));
  }
}

.#{$ns}Button--lg {
  @include button-size(var(--Button--lg-paddingY),
    var(--Button--lg-paddingX),
    var(--Button--lg-fontSize),
    var(--Button--lg-lineHeight),
    var(--Button--lg-borderRadius),
    var(--Button--lg-height));

  &.#{$ns}Button--iconOnly {
    min-width: calc(var(--Button--lg-height) * var(--Button--iconOnly-minWidthRate));
  }
}

.#{$ns}Button--iconOnly {
  min-width: calc(var(--Button-height) * var(--Button--iconOnly-minWidthRate));

  &:not(.#{$ns}Button--link) {
    >svg.icon {
      width: px2rem(14px);
      height: px2rem(14px);
      top: px2rem(2px);
    }

    >.fa,
    >.iconfont {
      font-size: var(--fontSizeMd);
    }

    >.iconfont {
      line-height: 1;
    }
  }
}

.#{$ns}Button--loading {
  @include button-loading-icon();
}

.#{$ns}Button--link {
  width: auto;
  min-width: auto;
  font-weight: var(--fontWeightNormal);
  color: var(--Button--link-color);
  text-decoration: var(--link-decoration);
  border: none;
  height: auto;

  @include hover-focus {
    color: var(--Button--link-onHover-color);
    box-shadow: none;
  }

  @include hover-active {
    color: var(--Button--link-onActive-color);
    box-shadow: none;
  }

  &:disabled,
  &.is-disabled {
    color: var(--text--muted-color);
    pointer-events: none;
    // Aug
    // background: var(--Button-onDisabled-bg);
    background: transparent;
    border: none;
  }
}

.#{$ns}Button--block {
  display: block;
  width: 100%;

  +.#{$ns}Button--block {
    margin-top: var(--gap-base);

    @media screen and (min-width:1280px) and (max-width:1440px) {
      margin-top: 2px;
    }

    @media screen and (min-width:1441px) and (max-width:1680px) {
      margin-top: 4px;
    }
  }
}

input[type='submit'],
input[type='reset'],
input[type='button'] {
  &.#{$ns}Button--block {
    width: 100%;
  }
}

.#{$ns}ButtonToolbar {
  margin-left: calc(var(--gap-xs) * -1);
  margin-top: calc(var(--gap-xs) * -1);

  >.#{$ns}Button {
    margin-left: var(--gap-xs);
    margin-top: var(--gap-xs);
  }
}

.#{$ns}Action {
  display: inline-block;

  &:hover {
    cursor: pointer;
  }
}

.#{$ns}Group-display-button {
  padding: 0;
  display: inline-flex;
  flex-wrap: nowrap;

  .#{$ns}Group-text {
    padding: var(--Button-paddingY) var(--Button-paddingX);
    display: inline-block;
    flex: 1;
    @include ellipsis();
    max-width: calc(100% - 20px);
  }

  .#{$ns}Group-icon {
    height: 100%;
    width: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-left: 1px solid var(--saas-border-color);
  }
}

.#{$ns}Group-action {
  padding: 0;

  .ant-popover-inner {
    border-radius: (--Button-borderRadius);
  }

  .ant-popover-inner-content {
    padding: 0;
  }

  .ant-popover-arrow {
    display: none;
  }

  &-items {

    .#{$ns}ButtonGroup {
      width: 100%;

      .#{$ns}Button {
        border-color: transparent !important;
        @include ellipsis();
      }
    }
  }
}