/* [btn type] */
.btn_primary {
  border: none;
  background-color: var(--buttonPrimaryNormal);
  font-weight: 400;
  color: var(--white);
  cursor: pointer;
}

.btn_primary:hover {
  border: none;
  background-color: var(--buttonPrimaryHover);
  font-weight: 400;
  color: var(--white);
  cursor: pointer;
}

.btn_primary:active {
  border: none;
  background-color: var(--buttonPrimaryPressed);
  font-weight: 400;
  color: var(--white);
  cursor: pointer;
}

.btn_primary:disabled {
  border: none;
  background-color: var(--buttonDisabledBg);
  font-weight: 400;
  color: var(--gray500);
  cursor: pointer;
}
.btn_disabled {
  border: none;
  background-color: var(--buttonDisabledBg);
  font-weight: 400;
  color: var(--gray500);
  cursor: pointer;
}

/*element color - gray600*/

.btn_secondary {
  /* border-style: none; */
  /* border: none; */
  background-color: var(--buttonSecondaryNormal);
  border: 0.1rem solid var(--primary500);
  font-weight: 400;
  color: var(--primary600);
  cursor: pointer;
}

.btn_secondary:hover {
  background-color: var(--buttonSecondaryHover);
  border: 0.1rem solid var(--primary500);
  font-weight: 400;
  color: var(--primary600);
  cursor: pointer;
}

.btn_secondary:active {
  background-color: var(--buttonSecondaryPressed);
  border: 0.1rem solid var(--primary700);
  font-weight: 400;
  color: var(--white);
  cursor: pointer;
}

.btn_secondary:disabled {
  background-color: var(--buttonSecondaryDisabled);
  border: 0.1rem solid var(--primary500);
  font-weight: 400;
  color: var(--gray500);
  cursor: pointer;
}

.btn_neutral {
  background-color: var(--white);
  border: 0.1rem solid var(--gray900);
  font-weight: 400;
  color: var(--gray900);
  cursor: pointer;
}
/*element gray800*/

.btn_neutral:hover {
  background-color: var(--gray50);
  border: 0.1rem solid var(--gray900);
  font-weight: 400;
  color: var(--gray900);
  cursor: pointer;
}
/*element gray800*/

.btn_neutral:active {
  background-color: var(--gray100);
  border: 0.1rem solid var(--gray900);
  font-weight: 400;
  color: var(--gray900);
  cursor: pointer;
}
/*element gray800*/

.btn_neutral:disabled {
  background-color: var(--gray300);
  border: 0.1rem solid var(--gray400);
  font-weight: 400;
  color: var(--gray600);
  cursor: pointer;
} /*element gray500*/

.btn_text {
  color: var(--buttonTextTextNColor);
  cursor: pointer;
  outline: none;
  border: none;
  background-color: rgba(255, 255, 255, 0);
} /*element gray800*/

.btn_text:hover {
  color: var(--buttonTextTextNColor);
  cursor: pointer;
  outline: none;
  border: none;
  background-color: var(--buttonTextHoverColor);
}

.btn_text:active {
  color: var(--buttonTextTextNColor);
  cursor: pointer;
  outline: none;
  border: none;
  background-color: var(--buttonTextPressedColor);
}

.btn_text:disabled {
  color: var(--gray500);
  cursor: pointer;
  outline: none;
  border: none;
  background-color: var(--white);
}

.btn_text_unactive {
  color: var(--gray500);
  cursor: pointer;
  outline: none;
  border: none;
  background-color: rgba(255, 255, 255, 0);
}

.btn_text_unactive:hover {
  color: var(--buttonTextTextNColor);
  cursor: pointer;
  outline: none;
  border: none;
  background-color: var(--buttonTextHoverColor);
}

.btn_text_unactive:active {
  color: var(--buttonTextTextNColor);
  cursor: pointer;
  outline: none;
  border: none;
  background-color: var(--buttonTextPressedColor);
}

.btn_floating {
}

/* [btn radius] */
.btn_radius_2 {
  border-radius: 0.2rem;
}

.btn_radius_4 {
  border-radius: 0.4rem;
}

.btn_radius_8 {
  border-radius: 0.8rem;
}

.btn_radius_12 {
  border-radius: 1.2rem;
}

.btn_radius_16 {
  border-radius: 1.6rem;
}

.btn_radius_24 {
  border-radius: 2.4rem;
}

.btn_radius_999 {
  border-radius: 999px;
}

/* [btn size] */
.btn_size_XL {
  /* height: 6.4rem; */
  padding: 2.25rem 2.4rem;
  font-size: var(--font-lable-L);
  text-align: center;
}

.btn_size_L {
  /* height: 5.6rem; */
  padding: 1.85rem 2rem;
  font-size: var(--font-lable-L);
  text-align: center;
}

.btn_size_M {
  /* height: 4.8rem; */
  padding: 1.55rem 1.6rem;
  font-size: var(--font-lable-M);
  text-align: center;
}

.btn_size_S {
  /* height: 4rem; */
  padding: 1.25rem 1.2rem;
  font-size: var(--font-lable-S);
  text-align: center;
}

.btn_size_XS {
  /* height: 3.2rem; */
  padding: 0.85rem 1rem;
  font-size: var(--font-lable-S);
  text-align: center;
}

.btn_text_size_L {
  height: 4rem;
  padding: 1.05rem 0.2rem;
  font-size: var(--font-lable-L);
  text-align: center;
}

.btn_text_size_M {
  /* height: 3.2rem; */
  padding: 0.75rem 0.2rem;
  font-size: var(--font-lable-M);
  text-align: center;
}

.btn_text_size_S {
  /* height: 2.4rem; */
  padding: 0.45rem 0.2rem;
  font-size: var(--font-lable-S);
  text-align: center;
}

.btn_text_size_XS {
  /* height: 2rem; */
  padding: 0.25rem 0.2rem;
  font-size: var(--font-lable-S);
  text-align: center;
}

.btn_label {
  margin-bottom: 8px;
  font-size: var(--font-lable-S);
  text-align: left;
  color: var(--textTitle);
}

/*yc*/

.rounded-btn {
  /* display: block;
  width: 100%; */
  cursor: pointer;
  background-color: var(--primary400);
  padding: 1rem 2rem;
  font-family: inherit;
  color: #ffffff;
  font-size: 1.6rem;
  border: none;
  border-radius: 10rem;
}

.floating-btn {
  position: fixed;
  z-index: 100;
  bottom: 4rem;
  right: 4rem;
  padding: 2rem 3.2rem;
  background-color: var(--primary500);
  color: var(--white);
  border: none;
  font-size: var(--font-lable-M);
  border-radius: 999rem;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  cursor: pointer;
}

.outline-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 999rem;
  border: 1px solid var(--borderContents);
  padding: 2rem 3.2rem;
  cursor: pointer;
  background-color: var(--white);
}