.button-extra-large {
  --btn-height: var(--btn-xl-height);
  --btn-font-size: var(--btn-xl-font-size);
}
.button-large {
  --btn-height: var(--btn-lg-height);
  --btn-font-size: var(--btn-lg-font-size);
}
.button-medium {
  --btn-height: var(--btn-md-height);
  --btn-font-size: var(--btn-md-font-size);
}
.button-small {
  --btn-height: var(--btn-sm-height);
  --btn-font-size: var(--btn-sm-font-size);
}
.theme_btn {
  --font-weight: var(--theme-btn-font-weight);
  --font-style: var(--theme-btn-font-style);
  --font-decorate: var(--theme-btn-font-decorate);
}
.primary_btn {
  --font-weight: var(--primary-btn-font-weight);
  --font-style: var(--primary-btn-font-style);
  --font-decorate: var(--primary-btn-font-decorate);
}
.secondary_btn {
  --font-weight: var(--secondary-btn-font-weight);
  --font-style: var(--secondary-btn-font-style);
  --font-decorate: var(--secondary-btn-font-decorate);
}
.text_btn {
  --font-weight: var(--text-btn-font-weight);
  --font-style: var(--text-btn-font-style);
  --font-decorate: var(--text-btn-font-decorate);
}

.button {
  position: relative;
  height: var(--btn-height);
  line-height: var(--btn-height);
  padding: 0 calc(var(--btn-height) / 2);
  font-size: var(--btn-font-size);
  font-weight: var(--font-weight);
  font-style: var(--font-style);
  text-decoration: var(--font-decorate);
  border-radius: var(--button-radius);
  width: fit-content;
  text-align: center;
  word-break: break-word;
  display: -webkit-inline-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  cursor: pointer;
}
.button.full {
  width: 100%;
}
.button.split {
  flex: 1;
}
.button > .sicon {
  margin-left: 3px;
  font-size: var(--btn-font-size);
  line-height: 1;
  color: inherit;
}

.theme_btn.none {
  color: var(--theme-btn-text-color);
  background-color: var(--theme-btn-bg-color);
}
.theme_btn.none:hover {
  color: var(--theme-btn-hover-text-color);
  background-color: var(--theme-btn-hover-bg-color);
}

.primary_btn.none {
  color: var(--primary-btn-text-color);
  background-color: var(--primary-btn-bg-color);
}
.primary_btn.none:hover {
  color: var(--primary-btn-hover-text-color);
  background-color: var(--primary-btn-hover-bg-color);
}

.secondary_btn.none {
  color: var(--secondary-btn-text-color);
  border: 1px solid var(--secondary-btn-text-color);
  background-color: transparent;
}
.secondary_btn.none:hover {
  background-color: var(--secondary-btn-hover-bg-color);
}

.text_btn {
  padding: 0;
  height: auto;
  line-height: normal;
}
.text_btn.none {
  color: var(--text-btn-text-color);
  background-color: transparent;
}
.text_btn.none:hover {
  color: var(--text-btn-text-color);
}