@import '../custom.less';
@import '../mixins/size.less';
@import '../mixins/button.less';

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

.@{btn-prefix-cls} {
  .btn();
  .btn-default();

  &-long {
    width: 100%;
  }

  &>.rab-icon-loading-solid {
    margin-right: 4px;
  }

  &>.rab-icon+span,
  &>span+.rab-icon {
    margin-left: 4px;
  }

  &-primary {
    .btn-primary();

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

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

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

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

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

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

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

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

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

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

  &-dashed {
    .btn-dashed();
  }

  &-text {
    .btn-text();
  }

  &-success {
    .btn-color(@success-color);
  }

  &-warning {
    .btn-color(@warning-color);
  }

  &-error {
    .btn-color(@error-color);
  }

  &-info {
    .btn-color(@info-color);
  }

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

  &:before {
    position: absolute;
    top: -1px;
    left: -1px;
    bottom: -1px;
    right: -1px;
    background: @white;
    opacity: 0.35;
    content: '';
    border-radius: inherit;
    z-index: 1;
    transition: opacity @transition-time;
    pointer-events: none;
    display: none;
  }

  &&-loading {
    pointer-events: none;
    position: relative;

    &:before {
      display: block;
    }
  }

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

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

  &-ghost {
    color: @white;
    background: transparent;

    &:hover {
      background: transparent;
    }
  }

  &-ghost&-dashed,
  &-ghost&-default {
    color: @white;
    border-color: @white;

    &:hover {
      color: tint(@primary-color, 20%);
      border-color: tint(@primary-color, 20%);
    }
  }

  &-ghost&-primary {
    color: @primary-color;

    &:hover {
      color: tint(@primary-color, 20%);
      background: fade(tint(@primary-color, 95%), 50%);
    }
  }

  &-ghost&-info {
    color: @info-color;

    &:hover {
      color: tint(@info-color, 20%);
      background: fade(tint(@info-color, 95%), 50%);
    }
  }

  &-ghost&-success {
    color: @success-color;

    &:hover {
      color: tint(@success-color, 20%);
      background: fade(tint(@success-color, 95%), 50%);
    }
  }

  &-ghost&-warning {
    color: @warning-color;

    &:hover {
      color: tint(@warning-color, 20%);
      background: fade(tint(@warning-color, 95%), 50%);
    }
  }

  &-ghost&-error {
    color: @error-color;

    &:hover {
      color: tint(@error-color, 20%);
      background: fade(tint(@error-color, 95%), 50%);
    }
  }

  &-ghost&-default[disabled],
  &-ghost&-dashed[disabled],
  &-ghost&-primary[disabled],
  &-ghost&-info[disabled],
  &-ghost&-success[disabled],
  &-ghost&-warning[disabled],
  &-ghost&-error[disabled] {
    background: transparent;
    color: fade(#000, 25%);
    border-color: @btn-disable-border;
  }

  &-ghost&-text[disabled] {
    background: transparent;
    color: fade(#000, 25%);
  }

  &-sm {
    font-size: @font-size-small;
  }
}

a.@{btn-prefix-cls} {
  padding-top: 0.1px;
  line-height: @btn-height-base - 2px;

  &-lg {
    line-height: @btn-height-large - 2px;
  }

  &-sm {
    line-height: @btn-height-small - 2px;
  }
}