body :is(button, a, div).btn {
  cursor: pointer;
  display: flex;
  justify-content: center;
  transition: all 0.1s cubic-bezier(0.25, 0.8, 0.25, 1);
  padding: calc(var(--gapX5) - 2px + var(--textMtopT)) var(--gapX6) calc(var(--gapX4) + var(--textMbottomT));
  white-space: nowrap;
  -webkit-appearance: none;
  border-radius: 4px;
  color: var(--btnDefaultColor);
  background: var(--btnDefaultBg);
  border: 1px solid var(--btnDefaultBg);
  font-size: var(--textMsize);
  line-height: var(--textMheightT);
  height: fit-content;
  align-items: center;
  gap: var(--gap);
}

body :is(button, a, div).btn.small {
  padding: calc(var(--gapX4) - 1px + var(--textStopT)) var(--gapX3) calc(var(--gapX3) - 1px + var(--textSbottomT));
  font-size: var(--textSsize);
  line-height: var(--textSheightT);
}

body :is(button, a, div).btn.large {
  padding: calc(var(--gapX5) - 4px + var(--titleXStopT)) var(--gapX7) calc(var(--gapX5) - 2px + var(--titleXSbottomT));
  font-size: var(--textLsize);
  line-height: var(--titleXSheightT);
}

body :is(button, a, div).btn:hover {
  opacity: 1;
  text-decoration: none;
  color: var(--btnDefaultColor);
  background: var(--btnDefaultHoverBg);
  border: 1px solid var(--btnDefaultHoverBg);
}

body :is(button, a, div).btn:disabled {
  color: var(--btnDefaultDisableColor);
  background: var(--btnDefaultDisableBg);
  border: var(--btnDefaultDisableColor);
  pointer-events: none;
}

.btn:active {
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1), 0 0 10px 0 rgba(0, 0, 0, 0.1),
    0 1px 4px -1px rgba(0, 0, 0, 0.1);
  -webkit-transform: translateY(0);
  transform: translateY(0) !important;
  transition: 0.35s !important;
  text-decoration: none;
}

body :is(button, a, div).btn.outlined {
  background: transparent;
  color: var(--btnOutlinedColor);
  border: 1px solid var(--btnOutlinedColor);
}

body :is(button, a, div).btn.outlined:hover{
  background: var(--btnOutlinedHoverBg);  
}

body :is(button, a, div).btn.outlined:disabled{
  border-color: var(--btnOutlinedDisableBorder);
  color: var(--btnOutlinedDisableColor);
  background-color: transparent;
  pointer-events: none;
}

.btn-blue {
  background: #1c20cb;
  color: #fff;
}

.btn-blue:hover {
  background: #111219;
}

.btn-small {
  padding: var(--gapX3) var(--gapX5);
}

.btn-big {
  padding: var(--gapX3) var(--gapX5);
}

.xleb-button-wrapper {
  display: flex;
  align-items: center;
  /* font-size: 2.5rem; */
}

.xleb-button-wrapper span {
  font-size: var(--smallSize);
  line-height: var(--smallLineHeight);
  max-width: 30rem;
}

.xleb-button-wrapper span strong {
  font-size: 2.5rem;
}

.xleb-button-wrapper.text-right {
  flex-flow: row;
}

.xleb-button-wrapper.text-bottom {
  flex-direction: column;
}

@media (max-width: 480px) {
  .xleb-button-wrapper.text-right {
    flex-wrap: wrap;
    align-items: flex-start;
  }
}

@media (max-width: 768px) {
  body :is(button, a, div).btn.small{
    padding: calc(var(--gapX3) - 1px + var(--textStopT)) var(--gapX3) calc(var(--gapX3) - 1px + var(--textSbottomT));
  }
}