@button-prefix: s-button;

.@{button-prefix} {
  display: inline-block;
  height: @btn-height-base - 2;
  // line-height: @btn-height-base - 4;
  background: @btn-default-bg;
  font-weight: @btn-font-weight;
  font-size: @font-size-base - 1;
  padding: 0 @btn-padding-horizontal-base;
  border: @btn-border-width @btn-border-style @btn-default-border;
  border-radius: @btn-border-radius-base;
  color: @btn-default-color;
  outline: none;
  cursor: pointer;
  box-sizing: border-box;
  position: relative;
  transition: 0.3s all;
  vertical-align: middle;
  user-select: none;
  &:hover {
    color: @btn-default-hover;
    border-color: @btn-default-hover;
  }
  &:active {
    color: @btn-default-active;
    border-color: @btn-default-active;
  }
  &--lg {
    height: @btn-height-lg - 2;
    line-height: @btn-height-lg - 2;
    font-size: @font-size-lg - 1;
    padding: 0 @btn-padding-horizontal-lg;
  }
  &--sm {
    height: @btn-height-sm - 2;
    line-height: @btn-height-sm - 2;
    font-size: @font-size-sm - 1;
    padding: 0 @btn-padding-horizontal-sm;
  }
  &--primary {
    color: @btn-primary-color;
    background: @btn-primary-bg;
    border-color: @btn-primary-border;
    &.@{button-prefix}--ghost {
      color: @btn-primary-ghost-color;
    }
    &:hover {
      color: @btn-primary-color;
      border-color: @btn-primary-hover;
      background: @btn-primary-hover;
      &.@{button-prefix}--ghost {
        color: @btn-primary-hover;
        &.@{button-prefix}--disabled {
          color: @btn-disabled-color;
        }
      }
    }
    &:active {
      color: @btn-primary-color;
      border-color: @btn-primary-active;
      background: @btn-primary-active;
      &.@{button-prefix}--ghost {
        color: @btn-primary-active;
        &.@{button-prefix}--disabled {
          color: @btn-disabled-color;
        }
      }
    }
  }
  &--error {
    color: @btn-error-color;
    background: @btn-error-bg;
    border-color: @btn-error-border;
    &.@{button-prefix}--ghost {
      color: @btn-error-ghost-color;
    }
    &:hover {
      color: @btn-error-color;
      border-color: @btn-error-hover;
      background: @btn-error-hover;
      &.@{button-prefix}--ghost {
        color: @btn-error-hover;
        &.@{button-prefix}--disabled {
          color: @btn-disabled-color;
        }
      }
    }
    &:active {
      color: @btn-error-color;
      border-color: @btn-error-active;
      background: @btn-error-active;
      &.@{button-prefix}--ghost {
        color: @btn-error-hover;
        &.@{button-prefix}--disabled {
          color: @btn-disabled-color;
        }
      }
    }
  }
  &--disabled,
  &--disabled:hover,
  &--disabled:active {
    color: @btn-disabled-color;
    background: @btn-disabled-bg;
    border-color: @btn-disabled-border;
    cursor: not-allowed;
  }
  &--link,
  &--link:hover,
  &--link:active,
  &--link.@{button-prefix}--disabled {
    color: @btn-link-color;
    background: transparent;
    border-color: transparent;
    &:hover {
      color: @btn-primary-hover;
    }
    &:active {
      color: @btn-primary-active;
    }
    &.@{button-prefix}--disabled {
      color: @btn-disabled-color;
    }
  }
  &--ghost {
    background: @btn-default-ghost-bg;
    &:hover {
      background: transparent;
    }
    &:active {
      background: transparent;
    }
    &.@{button-prefix}--disabled {
      color: @btn-disabled-color;
    }
  }
  &--dashed {
    border-style: dashed;
  }
  &--block {
    display: block;
    width: 100%;
  }
  &--circle {
    border-radius: 999px;
  }
  &__icon {
    margin: 0 5px 0 -5px;
  }
}