@charset "utf-8";

/***********************
模块名：按钮
作者：rexren（任寒韬）
************************/
/* 按钮-基础 */
.btn {
  line-height: 24px;
  background: transparent;
  min-width: 80px;
  padding: 0 15px;
  font-size: 12px;
  color: #3c3c3c;
  color: var(--color-text-1);
  border: 1px solid #a4a4a4;
  border: 1px solid var(--color-line-4);
  border-radius: 26px;
  display: inline-block;
  text-align: center;
  cursor: pointer;
}

.btn:hover,
.btn.hover {
  background-color: #f4f4f4;
  background-color: var(--color-fill-2);
  color: #3c3c3c;
  color: var(--color-text-1);
}

/* disabled禁用 */
.btn.disabled,
.btn.disabled:hover,
.btn.disabled.hover:hover {
  border: 1px solid rgba(164, 164, 164, 0.3);
  color: #adadad;
  background: transparent;
  cursor: default;
}

/* primary 主要 */
.btn.btn-primary {
  border: 1px solid #faab00;
  color: #333;
  background: rgba(255, 200, 0, 0.5);
}

.btn.btn-primary.hover,
.btn.btn-primary:hover {
  border: 1px solid #faab00;
  color: #333;
  background: #ffc800;
}

.btn.btn-primary.disabled,
.btn.btn-primary.disabled.hover,
.btn.btn-primary.disabled:hover {
  border: 1px solid #f2e2c0;
  color: #adadad;
  background: #f2ecd8;
}

/* size 尺寸 */
.btn-m {
  line-height: 32px;
  height: 32px;
}

.btn-l {
  line-height: 36px;
  height: 36px;
}

/* em 其它场景应用 S */
.btn-em {
  min-width: 70px;
  background-color: #ffc800;
  border: none;
}

.btn-em.hover,
.btn-em:hover,
.btn-em.hover:hover {
  background-color: #e5b400;
  border-color: #e5b400;
}

.btn-em.disabled,
.btn-em.disabled:hover,
.btn-em.hover:hover {
  background-color: rgba(0, 0, 0, 0.7);
  border-color: rgba(0, 0, 0, 0.7);
  color: #adadad;
  cursor: default;
}

.btn-em1 {
  line-height: 36px;
  height: 36px;
  width: 100%;
  background-color: #ffc800;
  border: none;
  font-size: 14px;
  color: #333;
  position: relative;
}

.btn-em1:hover {
  background-color: #e6b400;
}

.btn-em2 {
  line-height: 36px;
  height: 36px;
  width: 100%;
  background-color: #00cb43;
  border: none;
  font-size: 14px;
  color: #fff;
}

.btn-em2:hover {
  background-color: #00b33b;
  color: #fff;
}

.btn-em3 {
  line-height: 36px;
  height: 36px;
  width: 100%;
  background-color: #3b9cff;
  border: none;
  font-size: 14px;
  color: #fff;
}

.btn-em3:hover {
  background-color: #358de6;
  color: #fff;
}

/* btn-buy 购买、支付 */
.btn-em4,
.btn-buy {
  line-height: 36px;
  height: 36px;
  width: 100%;
  background-color: #ff8d13;
  border: none;
  font-size: 14px;
  color: #fff;
}

.btn-em4:hover,
.btn-buy:hover {
  background-color: #e67e10;
  color: #fff;
}

/* em 其它场景应用 E */
/*.btn{transition: all .2s ease-out;}*/