@import "../mixins/index";
@btn-prefix-cls: ~"@{css-prefix}btn";

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

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

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

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

    .@{btn-prefix-cls}-group & + .@{btn-prefix-cls} {
      border-left-color: @btn-group-border;
    }
  }

  &-ghost {
    .btn-ghost;
  }

  &-circle, &-circle-outline {
    .btn-circle(@btn-prefix-cls);
  }

  &-circle-outline {
    .btn-circle-outline;
  }

  &:after {
    font-family: anticon;
    content: "\e610";
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease;
  }

  &-loading {
    padding-right: 31px;
    pointer-events: none;
    opacity: 0.75;
    &:after {
      .animation(loadingCircle 1s infinite linear);
      height: 12px;
      line-height: 12px;
      right: 12px;
      top: 50%;
      margin-top: -6px;
      opacity: 1;
      visibility: visible;
    }
  }

  &-sm&-loading {
    padding-right: 24px;
    &:after {
      right: 8px;
    }
  }

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

  // To ensure that a space will be placed between character and `Icon`.
  > .@{iconfont-css-prefix} + span, > span + .@{iconfont-css-prefix} {
    margin-left: 0.5em;
  }
}