@import "../../../style/theme/default/index.less";
@import "../../../style/mixins/index.less";
@import "./mixin";

@btn-prefix-cls: idoll-btn;

// Button styles
// -----------------------------
.@{btn-prefix-cls} {
  .reset-component;
  .btn;
  .btn-default;

  // Make sure that the target of Button's click event always be `button`
  // 保证子元素不会成为鼠标事件的target
  // Ref: https://github.com/ant-design/ant-design/issues/7034
  > i,
  > span {
    pointer-events: none;
  }

  &-primary {
    .btn-primary;

    .@{btn-prefix-cls}-group &:not(:first-child):not(:last-child) {
      border-right-color: @btn-group-border;
      border-left-color: @btn-group-border;

      &:disabled {
        border-color: @btn-default-border;
      }
    }

    .@{btn-prefix-cls}-group &:first-child {
      &:not(:last-child) {
        border-right-color: @btn-group-border;
        &[disabled] {
          border-right-color: @btn-default-border;
        }
      }
    }

    .@{btn-prefix-cls}-group &:last-child:not(:first-child),
    .@{btn-prefix-cls}-group & + & {
      border-left-color: @btn-group-border;
      &[disabled] {
        border-left-color: @btn-default-border;
      }
    }
  }
  &-normal {
    .btn-normal;
  }
  &-ghost {
    .btn-ghost;
  }

  &-dashed {
    .btn-dashed;
  }

  &-danger {
    .btn-danger;
  }
  &-create {
    .btn-special(@btn-prefix-cls);
    .btn-create;
  }
  &-quit {
    .btn-special(@btn-prefix-cls);
    .btn-quit;
  }
  &-circle,
  &-circle-outline {
    .btn-circle(@btn-prefix-cls);
  }
  &-text {
    .btn-text()
  }
  &:before {
    position: absolute;
    top: -1px;
    left: -1px;
    bottom: -1px;
    right: -1px;
    background: #fff;
    opacity: 0.35;
    content: '';
    border-radius: inherit;
    z-index: 1;
    transition: opacity .2s;
    pointer-events: none;
    display: none;
  }

  .@{iconfont-css-prefix} {
    transition: margin-left .3s @ease-in-out;
  }

  &&-loading:before {
    display: block;
  }

  &&-loading:not(&-circle):not(&-circle-outline):not(&-icon-only) {
    padding-left: 29px;
    pointer-events: none;
    position: relative;
    .@{iconfont-css-prefix} {
      margin-left: -14px;
    }
  }

  &-sm&-loading:not(&-circle):not(&-circle-outline):not(&-icon-only) {
    padding-left: 24px;
    .@{iconfont-css-prefix} {
      margin-left: -17px;
    }
  }

  &-group {
    .btn-group(@btn-prefix-cls);
  }

  // &:not(&-circle):not(&-circle-outline)&-icon-only {
  //   padding-left: 8px;
  //   padding-right: 8px;
  //   color: red;
  // }

  // http://stackoverflow.com/a/21281554/3040605
  &:focus > span,
  &:active > span {
    position: relative;
  }

  // 确保在两个字符的中间及Icon中间插入一个空格
  > .@{iconfont-css-prefix} + span,
  > span + .@{iconfont-css-prefix} {
    margin-left: @btn-icon-margin-left-base;
  }

  &-clicked:after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    bottom: -1px;
    right: -1px;
    border-radius: inherit;
    border: 0 solid @primary-color;
    opacity: 0.4;
    animation: buttonEffect .4s;
    display: block;
  }

  &-danger&-clicked:after {
    border-color: @btn-danger-color;
  }

  &-background-ghost {
    background: transparent !important;
    border-color: #fff;
    color: #fff;
  }

  &-background-ghost&-primary {
    .button-variant-ghost(@primary-color);
  }

  &-background-ghost&-danger {
    .button-variant-ghost(@btn-danger-color);
  }
}

@keyframes buttonEffect {
  to {
    opacity: 0;
    top: -6px;
    left: -6px;
    bottom: -6px;
    right: -6px;
    border-width: 6px;
  }
}

a.@{btn-prefix-cls} {
  line-height: @btn-height-base - 2px;
  &-lg {
    line-height: @btn-height-lg - 2px;
  }
  &-sm {
    line-height: @btn-height-sm - 2px;
  }
}