@import '../../style/index';

.szfe-button {
  border: 0;
  outline: 0;
  border-radius: 2px;
  transition: background-color 0.2s;
  text-align: center;
  position: relative;

  &--block {
    display: block;
    width: 100%;

    & + & {
      margin-top: 8px * @size-scale;
    }
  }

  &--inline {
    display: inline-block;

    & + & {
      margin-left: 8px * @size-scale;
    }
  }

  &--disabled {
    pointer-events: none;
  }

  // 以下是颜色配置
  &--default {
    border: solid 1px #e6e6e6;
    background-color: transparent;

    &:active {
      background-color: rgba(0, 0, 0, 0.05);
    }

    &.szfe-button--disabled {
      border-color: lighten(#e6e6e6, 3%);
      color: lighten(#333, 50%);
    }
  }

  &--primary {
    color: #fff;
    background-color: @color-primary;

    &:active {
      background-color: darken(@color-primary, 15%);
    }

    &.szfe-button--disabled {
      background-color: lighten(@color-primary, 20%);
    }
  }

  &--warn {
    color: #fff;
    background-color: @color-orange;

    &:active {
      background-color: darken(@color-orange, 15%);
    }

    &.szfe-button--disabled {
      background-color: lighten(@color-orange, 20%);
    }
  }

  &--error {
    color: #fff;
    background-color: @color-red;

    &:active {
      background-color: darken(@color-red, 15%);
    }

    &.szfe-button--disabled {
      background-color: lighten(@color-red, 20%);
    }
  }

  // 以下是尺寸配置
  &--large {
    line-height: 40px * @size-scale;
    height: 40px * @size-scale;
    padding: 0 14px * @size-scale;
    font-size: 18px * @size-scale;

    &.szfe-button--block {
      line-height: 44px * @size-scale;
      height: 44px * @size-scale;
      padding: 0 16px * @size-scale;
    }

    &.szfe-button--inline {
      min-width: 22px * @size-scale;
    }
  }

  &--normal {
    line-height: 34px * @size-scale;
    height: 34px * @size-scale;
    padding: 0 12px * @size-scale;
    font-size: 14px * @size-scale;

    &.szfe-button--block {
      line-height: 38px * @size-scale;
      height: 38px * @size-scale;
      padding: 0 12px * @size-scale;
    }

    &.szfe-button--inline {
      min-width: 18px * @size-scale;
    }
  }

  &--small {
    line-height: 28px * @size-scale;
    height: 28px * @size-scale;
    padding: 0 10px * @size-scale;
    font-size: 12px * @size-scale;

    &.szfe-button--block {
      line-height: 32px * @size-scale;
      height: 32px * @size-scale;
      padding: 0 12px * @size-scale;
    }

    &.szfe-button--inline {
      min-width: 16px * @size-scale;
    }
  }
}