// Button按钮
// 基础样式
.button {
  position: relative;
  box-sizing: border-box;

  height: 32px;
  padding: 0 12px;
  font-size: var(--font-size-m);
  &.shape-round,
  &.shape-circle {
    border-radius: 32px;
  }
  &.shape-square,
  &.shape-circle {
    padding: 0;
    width: 32px;
  }

  &.xs {
    height: 20px;
    padding: 0 5px;
    font-size: 12px;
    &.shape-round,
    &.shape-circle {
      border-radius: 20px;
    }
    &.shape-square,
    &.shape-circle {
      width: 20px;
    }
  }
  &.s {
    height: 24px;
    padding: 0 12px;
    font-size: 12px;
    &.shape-round,
    &.shape-circle {
      border-radius: 24px;
    }
    &.shape-square,
    &.shape-circle {
      width: 24px;
    }
  }
  &.m {
  }
  &.l {
    height: 44px;
    padding: 0 12px;
    font-size: var(--font-size-l);

    &.shape-round,
    &.shape-circle {
      border-radius: 44px;
    }
    &.shape-square,
    &.shape-circle {
      width: 44px;
    }
  }
  &.xl {
    height: 54px;
    padding: 0 15px;
    // 字号太大会不好看
    font-size: var(--font-size-l);

    &.shape-round,
    &.shape-circle {
      border-radius: 54px;
    }
    &.shape-square,
    &.shape-circle {
      width: 54px;
    }
  }
  vertical-align: middle;

  border-style: solid;
  border-width: 1px;
  &:extend(.appearance);
  .inline-flex;
  .flex-middle;
  .flex-center;

  &[disabled],
  &.disabled {
    pointer-events: none;
  }
}

// 填充模式
.button {
  // 默认按钮
  &,
  &.default {
    color: var(--default);
    background-color: transparent;
    border-color: var(--border);
    &.disabled,
    &[disabled] {
      color: var(--disabled);
    }
  }
  // 主色按钮
  &.primary {
    color: white;
    background-color: var(--primary);
    border-color: var(--primary);
    &.disabled,
    &[disabled] {
      opacity: 0.3;
    }
  }
  // 链接按钮
  &.link {
    color: white;
    background-color: var(--link);
    border-color: var(--link);
    &.disabled,
    &[disabled] {
      opacity: 0.3;
    }
  }
  // 警告按钮
  &.warning {
    color: white;
    background-color: var(--warning);
    border-color: var(--warning);
    &.disabled,
    &[disabled] {
      opacity: 0.3;
    }
  }
  // 危险按钮
  &.danger {
    color: white;
    background-color: var(--danger);
    border-color: var(--danger);
    &.disabled,
    &[disabled] {
      opacity: 0.3;
    }
  }
  // 完成按钮
  &.success {
    color: white;
    background-color: var(--success);
    border-color: var(--success);
    &.disabled,
    &[disabled] {
      opacity: 0.3;
    }
  }
}

// 线框模式
.button.outline {
  // 默认按钮
  &,
  &.default {
    color: var(--default);
    background-color: transparent;
    border-color: var(--border);
  }
  // 主色按钮
  &.primary {
    color: var(--primary);
    background-color: transparent;
    border-color: var(--primary);
  }
  // 链接按钮
  &.link {
    color: var(--link);
    background-color: transparent;
    border-color: var(--link);
  }
  // 警告按钮
  &.warning {
    color: var(--warning);
    background-color: transparent;
    border-color: var(--warning);
  }
  // 危险按钮
  &.danger {
    color: var(--danger);
    background-color: transparent;
    border-color: var(--danger);
  }
  // 完成按钮
  &.success {
    color: var(--success);
    background-color: transparent;
    border-color: var(--success);
  }
}

// 文字模式
.button.text {
  height: initial;
  padding: 0;
  // 默认按钮
  &,
  &.default {
    color: var(--default);
    background-color: transparent;
    border: 0;
  }
  // 主色按钮
  &.primary {
    color: var(--primary);
    background-color: transparent;
    border: 0;
  }
  // 链接按钮
  &.link {
    color: var(--link);
    background-color: transparent;
    border: 0;
  }
  // 警告按钮
  &.warning {
    color: var(--warning);
    background-color: transparent;
    border: 0;
  }
  // 危险按钮
  &.danger {
    color: var(--danger);
    background-color: transparent;
    border: 0;
  }
  // 完成按钮
  &.success {
    color: var(--success);
    background-color: transparent;
    border: 0;
  }
}
