@import '../variables.less';
@import '../mixins.less';

.wm-button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  // 类型
  &-primary {
    color: @color-white;
    background: @color-gradient-primary;
  }

  &-primary-line {
    color: @color-brand;
    background: @color-white;
    border: 1px solid @color-brand;
  }

  &-gold {
    color: @color-white;
    background: @color-gradient-second;
  }

  &-light {
    color: @color-brand;
    background: rgba(255, 102, 0, 0.08);
  }

  &-grey {
    color: @color-grey-33;
    background: @color-grey-f5;
  }

  &-grey-line {
    color: @color-grey-33;
    background: @color-white;
    border: 1px solid @color-grey-eb;
  }

  &-white {
    color: @color-brand;
    background: @color-gradient-opacity;
  }

  &-white-line {
    background: rgba(0, 0, 0, 0);
    color: @color-white;
    border: 1px solid @color-white;
  }

  // 禁用
  &-disable-0 {
    color: @color-white;
    background: @color-gradient-grey;
  }

  &-disable-1 {
    color: @color-grey-cc;
    border: 1px solid @color-grey-cc;
  }

  &-disable-2 {
    color: @color-grey-cc;
    background: @color-grey-f5;
  }

  &-disable-3 {
    color: @color-grey-cc;
    border: 1px solid @color-grey-eb;
  }

  &-disable-4 {
    opacity: 0.4;
  }

  // 尺寸
  &-long {
    height: 72px;
    border-radius: 36px;
    .text(28px);
    .icon(32px, 16px);
  }

  &-large {
    height: 72px;
    padding: 0 32px;
    border-radius: 36px;
    .text(28px);
    .icon(32px, 16px);
  }

  &-middle {
    height: 56px;
    padding: 0 24px;
    border-radius: 28px;
    .text(24px);
    .icon(24px, 8px);
  }

  &-small {
    height: 48px;
    padding: 0 24px;
    border-radius: 24px;
    .text(20px);
    .icon(20px, 8px);
  }

  &-mini {
    height: 40px;
    padding: 0 16px;
    border-radius: 20px;
    .text(20px);
    .icon(20px, 8px);
  }

  // 多行
  &-lines {
    flex-direction: column;
    height: 72px;
    padding: 0 36px;
    border-radius: 36px;
    color: @color-white;
    background: @color-gradient-primary;
    .text {
      font-size: @font-size-16;
      padding-bottom: 4px;
      color: @color-white;
    }
    .info {
      font-size: @font-size-8;
      color: @color-white;
    }
  }

  // 函数
  .text(@font-size) {
    .text {
      color: inherit;
      line-height: normal;
      font-size: @font-size;
    }
  }
  .icon(@size, @margin-right) {
    .icon {
      width: @size;
      height: @size;
      margin-right: @margin-right;
    }
  }
}