.jmw-btn {
  --arrow-width: 10px;
  --arrow-stroke: 2px;
  box-sizing: border-box;
  border: 0;
  border-radius: 40px;
  color: white;
  padding: 7.5px 20px;
  background: linear-gradient(90deg, var(--bs-secondary-dark), var(--bs-secondary));
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: 0.2s background;
  gap: 5px;
  font-weight: 600;
  font-size: 13px;
}
.jmw-btn:hover {
  background-color: var(--bs-secondary-dark);
}
.jmw-btn svg {
  height: 16px;
  width: 16px;
}
.jmw-btn span {
  text-wrap: nowrap;
}
.jmw-btn .arrow-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
.jmw-btn .arrow {
  width: var(--arrow-width);
  background: transparent;
  height: var(--arrow-stroke);
  position: relative;
  transition: 0.2s;
}
.jmw-btn .arrow::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  border: solid white;
  border-width: 0 var(--arrow-stroke) var(--arrow-stroke) 0;
  display: inline-block;
  top: -3px;
  right: 3px;
  transition: 0.2s;
  padding: 3px;
  transform: rotate(-45deg);
}
.jmw-btn:hover .arrow {
  background: white;
}
.jmw-btn:hover .arrow:before {
  right: 0;
}
.jmw-btn .arrow-wrapper.reverse .arrow {
  width: var(--arrow-width);
  background: transparent;
  height: var(--arrow-stroke);
  position: relative;
  transition: 0.2s;
}
.jmw-btn .arrow-wrapper.reverse .arrow::before {
  border-width: var(--arrow-stroke) 0 0 var(--arrow-stroke);
  right: auto;
  left: 3px;
}
.jmw-btn:hover .arrow-wrapper.reverse .arrow:before {
  right: auto;
  left: 0;
}
.jmw-btn.light {
  color: var(--bs-dark);
  background: white;
}
.jmw-btn.light:hover {
  background-color: var(--bs-gray-100);
}
.jmw-btn.light .arrow::before {
  border-color: var(--bs-dark);
}
.jmw-btn.light:hover .arrow {
  background: var(--bs-dark);
}
.jmw-btn.outline-light {
  color: white;
  background: transparent;
  border: 1px solid white;
}
.jmw-btn.outline-light:hover {
  background-color: transparent;
}
.jmw-btn.outline-light .arrow::before {
  border-color: white;
}
.jmw-btn.outline-light:hover .arrow {
  background: white;
}
.jmw-btn.gray {
  color: var(--bs-dark);
  background: var(--bs-gray-100);
}
.jmw-btn.gray:hover {
  background-color: var(--bs-gray-200);
}
.jmw-btn.gray .arrow::before {
  border-color: var(--bs-dark);
}
.jmw-btn.gray:hover .arrow {
  background: var(--bs-dark);
}
.jmw-btn.soft-primary {
  color: var(--bs-primary);
  background: var(--bs-primary-soft);
}
.jmw-btn.soft-primary:hover {
  background-color: var(--bs-primary-soft);
}
.jmw-btn.soft-primary .arrow::before {
  border-color: var(--bs-primary);
}
.jmw-btn.soft-primary:hover .arrow {
  background: var(--bs-primary);
}
.jmw-btn.soft-secondary {
  color: var(--bs-secondary);
  background: var(--bs-secondary-soft);
}
.jmw-btn.soft-secondary:hover {
  background-color: var(--bs-secondary-soft);
}
.jmw-btn.soft-secondary .arrow::before {
  border-color: var(--bs-secondary);
}
.jmw-btn.soft-secondary:hover .arrow {
  background: var(--bs-secondary);
}
.jmw-btn.outline-secondary {
  color: var(--bs-secondary-dark);
  background: transparent;
  border: 1px solid var(--bs-secondary-dark);
}
.jmw-btn.outline-secondary:hover {
  background-color: transparent;
}
.jmw-btn.outline-secondary .arrow::before {
  border-color: var(--bs-secondary);
}
.jmw-btn.outline-secondary:hover .arrow {
  background: var(--bs-secondary);
}
.jmw-btn.outline-mix {
  color: var(--bs-secondary-dark);
  background: transparent;
  border: 1px solid var(--bs-primary-dark);
}
.jmw-btn.outline-mix:hover {
  background-color: transparent;
}
.jmw-btn.outline-mix .arrow::before {
  border-color: var(--bs-secondary);
}
.jmw-btn.outline-mix:hover .arrow {
  background: var(--bs-secondary);
}