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

@btn-prefix-cls: ~'@{idoll-prefix}-btn';

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

  > 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;
      }
    }
  }

  &-secondary{
    .btn-secondary
  }


  &-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);
  }
  &-square {
    .btn-square(@btn-prefix-cls);
  }
  &-text {
    .btn-text()
  }
  &:before {
    position: absolute;
    top: -1px;
    left: -1px;
    bottom: -1px;
    right: -1px;
    background: @btn-default-bg;
    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;
    transform: translateY(-5%);
  }

  &&-loading {
    opacity: 0.4;
    .idoll-icon:before {
      animation: loadingCircle 1s infinite linear;
    }
  }

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

  &-block {
    width: 100%;
  }

  // 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 - 2px;
  }

  &-sm > .idoll-icon + span,
  &-sm > span + .idoll-icon {
    margin-left: @btn-icon-margin-left-base - 6px !important;
  }

  &-sm  &-loading {
    .loading(@btn-font-size-sm);
  }

  // 幽灵按钮
  &-background-ghost {
    background: transparent !important;
    border-color: @btn-ghost-border;
    color: @btn-ghost-color;
    .button-variant-ghost(@btn-ghost-color);
    .@{idoll-prefix}-icon {
      color: @btn-ghost-border;
    }
    &:hover,&:active,&:focus {
      .@{idoll-prefix}-icon {
        color: @btn-ghost-border;
      }
    }
  }

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

  &-background-ghost&-danger {
    .button-variant-ghost(@btn-danger-color);
  }
  &-background-ghost&-warning {
    .button-variant-ghost(@btn-warning-color);
  }
  &-background-ghost&-success {
    .button-variant-ghost(@btn-success-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;
  }
}

// 解决chrome浏览器打开新链接返回原页面会有下划线
a {
  text-decoration: none !important;
}