.btn-color-primary {
  --btn-color: #fff;
  --btn-color-hover: #fff;
  --btn-bgcolor: var(--wd-primary-color);
  --btn-bgcolor-hover: var(--wd-primary-color);
  --btn-brd-color: var(--wd-primary-color);
  --btn-brd-color-hover: var(--wd-primary-color);
  --btn-box-shadow-hover: inset 0 0 0 1000px rgba(0, 0, 0, 0.1);
}
.btn-color-primary.btn-style-bordered {
  --btn-color: var(--wd-primary-color);
}
.btn-color-primary.btn-style-link {
  --btn-color: var(--color-gray-800);
  --btn-color-hover: var(--color-gray-500);
}
.btn-color-alt {
  --btn-color: #fff;
  --btn-color-hover: #fff;
  --btn-bgcolor: var(--wd-alternative-color);
  --btn-bgcolor-hover: var(--wd-alternative-color);
  --btn-brd-color: var(--wd-alternative-color);
  --btn-brd-color-hover: var(--wd-alternative-color);
  --btn-box-shadow-hover: inset 0 0 0 1000px rgba(0, 0, 0, 0.1);
}
.btn-color-alt.btn-style-bordered {
  --btn-color: var(--wd-alternative-color);
}
.btn-color-alt.btn-style-link {
  --btn-color: var(--color-gray-800);
  --btn-color-hover: var(--color-gray-500);
}
.btn-color-black {
  --btn-color: #fff;
  --btn-color-hover: #fff;
  --btn-bgcolor: #212121;
  --btn-bgcolor-hover: #212121;
  --btn-brd-color: #212121;
  --btn-brd-color-hover: #212121;
  --btn-box-shadow-hover: inset 0 0 0 1000px rgba(0, 0, 0, 0.1);
}
.btn-color-black.btn-style-bordered {
  --btn-color: #333;
}
.btn-color-black.btn-style-link {
  --btn-color: var(--color-gray-800);
  --btn-color-hover: var(--color-gray-500);
}
.btn-color-white {
  --btn-color: #333;
  --btn-color-hover: #333;
  --btn-bgcolor: #fff;
  --btn-bgcolor-hover: #fff;
  --btn-brd-color: rgba(255, 255, 255, 0.5);
  --btn-brd-color-hover: #fff;
  --btn-box-shadow-hover: inset 0 0 0 1000px rgba(0, 0, 0, 0.1);
}
.btn-color-white.btn-style-bordered {
  --btn-color: #fff;
}
.btn-color-white.btn-style-link {
  --btn-color: #fff;
  --btn-color-hover: #fff;
}
.btn.btn-style-3d {
  --btn-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15);
  --btn-box-shadow-hover: inset 0 -2px 0 rgba(0, 0, 0, 0.15);
}
.btn.btn-style-3d:active {
  box-shadow: none;
  top: 1px;
}
.btn.btn-style-bordered {
  --btn-bgcolor: transparent;
  --btn-brd-width: 2px;
  --btn-box-shadow-hover: none;
}
.btn.btn-style-link {
  --btn-bgcolor: transparent;
  --btn-bgcolor-hover: transparent;
  --btn-brd-width: 2px;
  --btn-box-shadow-hover: none;
  --btn-height: none;
  --btn-padding: 0;
  border-top: 0;
  border-inline: 0;
}
.btn-size-extra-small {
  --btn-padding: 5px 10px;
  --btn-height: 28px;
  --btn-font-size: 11px;
}
.btn-size-small {
  --btn-padding: 5px 14px;
  --btn-height: 36px;
  --btn-font-size: 12px;
}
.btn-shape-round,
.btn-style-round {
  --btn-brd-radius: 35px;
}
.btn-shape-semi-round,
.btn-style-semi-round {
  --btn-brd-radius: 5px;
}
.btn-icon-pos-left {
  flex-direction: row-reverse;
}
.btn-icon-pos-right {
  flex-direction: row;
}
@media (min-width: 1025px) {
  .btn-size-large {
    --btn-padding: 5px 28px;
    --btn-height: 48px;
    --btn-font-size: 14px;
  }
  .btn-size-extra-large {
    --btn-padding: 5px 40px;
    --btn-height: 56px;
    --btn-font-size: 16px;
  }
}