/* Region base */
.ui-btn,
.ui-btn-main,
.ui-btn-extra,
.ui-btn-menu {
  font-family: var(--kt-ui-btn-ff);
  font-weight: var(--kt-ui-btn-font-weight);
  transition-property: color, background-color, border-color, opacity, box-shadow, transform;
  transition-duration: 160ms;
  transition-timing-function: linear;
  transform-origin: 50% 50%;
}

.ui-btn,
.ui-btn-main {
  text-transform: none;
}

.ui-btn:active {
  transform: scale(0.9);
}

.ui-btn:focus-visible,
.ui-btn.ui-btn-focus {
  box-shadow: 0 0 0 1px var(--kt-ui-btn-focus-offset-color), 0 0 0 3px var(--kt-ui-btn-focus-color);
}

/* Endregion */
/* Region no-caps */
.ui-btn-no-caps,
.ui-btn-no-caps .ui-btn-main {
  font-size: var(--ui-btn-font-size);
}

/* Endregion */
/* Region round btn */
.ui-btn.ui-btn-round {
  --ui-btn-padding: 0;
  --ui-btn-radius: var(--kt-ui-btn-radius-xl);
}

.ui-btn.ui-btn-round {
  min-width: var(--ui-btn-height);
}

/* Endregion */
/* Region icon btn */
.ui-btn.--only-icon {
  min-width: var(--ui-btn-height);
}

.ui-btn.--only-icon {
  --ui-btn-radius: var(--kt-ui-btn-radius-sm);
  --ui-btn-padding: 0;
  --kt-ui-btn-padding-inline: 0;
}

/* Endregion */
/* Region sizes */
/* == xs == */
.ui-btn-xs {
  --kt-ui-btn-padding-inline: var(--kt-ui-btn-padding-inline-sm);
  --ui-btn-min-width: var(--kt-ui-btn-min-width-sm);
  --ui-btn-radius: var(--kt-ui-btn-radius-xl);
  --ui-btn-font-size: var(--kt-ui-btn-font-size-sm);
}

/* == end xs == */
/* == sm == */
.ui-btn-sm {
  --kt-ui-btn-padding-inline: var(--kt-ui-btn-padding-inline-lg);
  --ui-btn-min-width: var(--kt-ui-btn-min-width-md);
  --ui-btn-radius: var(--kt-ui-btn-radius-xs);
  --ui-btn-font-size: var(--kt-ui-btn-font-size-sm);
}

/* == end sm == */
/* == md == */
.ui-btn-md {
  --kt-ui-btn-padding-inline: var(--kt-ui-btn-padding-inline-xl);
  --ui-btn-min-width: var(--kt-ui-btn-min-width-md);
  --ui-btn-radius: var(--kt-ui-btn-radius-sm);
  --ui-btn-font-size: var(--kt-ui-btn-font-size-md);
}

.ui-btn-md.ui-btn-icon {
  --ui-btn-min-width: var(--ui-btn-height);
  --ui-btn-padding: 0;
  --kt-ui-btn-padding-inline: 0;
}

.ui-btn-md.ui-btn-min {
  --kt-ui-btn-padding-inline: var(--kt-ui-btn-padding-inline-lg);
}

.ui-btn-md.ui-btn-min {
  justify-content: flex-start;
}

.ui-btn-md.ui-btn-min .kt-ui-btn__icon--right {
  margin-left: auto;
}

.ui-btn-md.ui-btn-square {
  --kt-ui-btn-padding-inline: var(--kt-ui-btn-padding-inline-sm);
  --ui-btn-radius: var(--kt-ui-btn-radius-xs);
}

/* == end md == */
/* == lg == */
.ui-btn-lg {
  --kt-ui-btn-padding-inline: var(--kt-ui-btn-padding-inline-sm);
  --ui-btn-min-width: var(--kt-ui-btn-min-width-lg);
  --ui-btn-radius: var(--kt-ui-btn-radius-sm);
  --ui-btn-font-size: var(--kt-ui-btn-font-size-md);
}

.ui-btn-lg.ui-btn:not(.ui-btn-round) {
  --ui-btn-radius: var(--kt-ui-btn-radius-sm);
}

.ui-btn-lg.ui-btn-min {
  justify-content: flex-start;
}

.ui-btn-lg.ui-btn-min .kt-ui-btn__icon--right {
  margin-left: auto;
}

/* == End lg == */
/* == xl == */
.ui-btn-xl {
  --kt-ui-btn-padding-inline: var(--kt-ui-btn-padding-inline-lg);
  --ui-btn-min-width: var(--kt-ui-btn-min-width-xl);
  --ui-btn-height: var(--ui-btn-size-xl);
  --ui-btn-radius: var(--kt-ui-btn-radius-md);
  --ui-btn-font-size: var(--kt-ui-btn-font-size-md);
}

/* == end xl == */
/* == 2xl == */
.ui-btn-2xl {
  --kt-ui-btn-padding-inline: var(--kt-ui-btn-padding-inline-xl);
  --ui-btn-min-width: var(--kt-ui-btn-min-width-2xl);
  --ui-btn-height: var(--ui-btn-size-2xl);
  --ui-btn-radius: var(--kt-ui-btn-radius-sm);
  --ui-btn-font-size: var(--kt-ui-btn-font-size-lg);
}

.ui-btn-2xl.ui-btn-round {
  --ui-btn-radius: var(--kt-ui-btn-radius-lg);
}

/* == end 2xl == */
/* Endregion */
/* Region primary button */
.ui-btn,
.ui-btn-primary {
  --ui-btn-color: var(--kt-ui-btn-primary-color);
  --ui-btn-color-hover: var(--kt-ui-btn-primary-color-hover);
  --ui-btn-color-active: var(--kt-ui-btn-primary-color-active);
  --ui-btn-color-disabled: var(--kt-ui-btn-primary-color-disabled);
  --ui-btn-background: var(--kt-ui-btn-primary-background);
  --ui-btn-background-hover: var(--kt-ui-btn-primary-background-hover);
  --ui-btn-background-active: var(--kt-ui-btn-primary-background-active);
  --ui-btn-background-disabled: var(--kt-ui-btn-primary-background-disabled);
  --ui-btn-border-color: var(--kt-ui-btn-primary-border-color);
  --ui-btn-border-color-hover: var(--kt-ui-btn-primary-border-color-hover);
  --ui-btn-border-color-active: var(--kt-ui-btn-primary-border-color-active);
  --ui-btn-border-color-disabled: var(--kt-ui-btn-primary-border-color-disabled);
}

/* Endregion */
/* Region secondary button */
.ui-btn-secondary {
  --ui-btn-color: var(--kt-ui-btn-secondary-color);
  --ui-btn-color-hover: var(--kt-ui-btn-secondary-color-hover);
  --ui-btn-color-active: var(--kt-ui-btn-secondary-color-active);
  --ui-btn-color-disabled: var(--kt-ui-btn-secondary-color-disabled);
  --ui-btn-background: var(--kt-ui-btn-secondary-background);
  --ui-btn-background-hover: var(--kt-ui-btn-secondary-background-hover);
  --ui-btn-background-active: var(--kt-ui-btn-secondary-background-active);
  --ui-btn-background-disabled: var(--kt-ui-btn-secondary-background-disabled);
  --ui-btn-border-color: var(--kt-ui-btn-secondary-border-color);
  --ui-btn-border-color-hover: var(--kt-ui-btn-secondary-border-color-hover);
  --ui-btn-border-color-active: var(--kt-ui-btn-secondary-border-color-active);
  --ui-btn-border-color-disabled: var(--kt-ui-btn-secondary-border-color-disabled);
}

/* Endregion */
/* Region tertiary button */
.ui-btn-tertiary {
  --ui-btn-color: var(--kt-ui-btn-tertiary-color);
  --ui-btn-color-hover: var(--kt-ui-btn-tertiary-color-hover);
  --ui-btn-color-active: var(--kt-ui-btn-tertiary-color-active);
  --ui-btn-color-disabled: var(--kt-ui-btn-tertiary-color-disabled);
  --ui-btn-background: var(--kt-ui-btn-tertiary-background);
  --ui-btn-background-hover: var(--kt-ui-btn-tertiary-background-hover);
  --ui-btn-background-active: var(--kt-ui-btn-tertiary-background-active);
  --ui-btn-background-disabled: var(--kt-ui-btn-tertiary-background-disabled);
  --ui-btn-border-color: var(--kt-ui-btn-tertiary-border-color);
  --ui-btn-border-color-hover: var(--kt-ui-btn-tertiary-border-color-hover);
  --ui-btn-border-color-active: var(--kt-ui-btn-tertiary-border-color-active);
  --ui-btn-border-color-disabled: var(--kt-ui-btn-tertiary-border-color-disabled);
}

/* Endregion */
/* Region primary-light button */
.ui-btn-primary-light {
  --ui-btn-color: var(--kt-ui-btn-primary-light-color);
  --ui-btn-color-hover: var(--kt-ui-btn-primary-light-color-hover);
  --ui-btn-color-active: var(--kt-ui-btn-primary-light-color-active);
  --ui-btn-color-disabled: var(--kt-ui-btn-primary-light-color-disabled);
  --ui-btn-background: var(--kt-ui-btn-primary-light-background);
  --ui-btn-background-hover: var(--kt-ui-btn-primary-light-background-hover);
  --ui-btn-background-active: var(--kt-ui-btn-primary-light-background-active);
  --ui-btn-background-disabled: var(--kt-ui-btn-primary-light-background-disabled);
  --ui-btn-border-color: var(--kt-ui-btn-primary-light-border-color);
  --ui-btn-border-color-hover: var(--kt-ui-btn-primary-light-border-color-hover);
  --ui-btn-border-color-active: var(--kt-ui-btn-primary-light-border-color-active);
  --ui-btn-border-color-disabled: var(--kt-ui-btn-primary-light-border-color-disabled);
  --kt-ui-btn-focus-offset-color: transparent;
}

/* Endregion */
/* Region secondary-grey button */
.ui-btn-secondary-grey {
  --ui-btn-color: var(--kt-ui-btn-secondary-grey-color);
  --ui-btn-color-hover: var(--kt-ui-btn-secondary-grey-color-hover);
  --ui-btn-color-active: var(--kt-ui-btn-secondary-grey-color-active);
  --ui-btn-color-disabled: var(--kt-ui-btn-secondary-grey-color-disabled);
  --ui-btn-background: var(--kt-ui-btn-secondary-grey-background);
  --ui-btn-background-hover: var(--kt-ui-btn-secondary-grey-background-hover);
  --ui-btn-background-active: var(--kt-ui-btn-secondary-grey-background-active);
  --ui-btn-background-disabled: var(--kt-ui-btn-secondary-grey-background-disabled);
  --ui-btn-border-color: var(--kt-ui-btn-secondary-grey-border-color);
  --ui-btn-border-color-hover: var(--kt-ui-btn-secondary-grey-border-color-hover);
  --ui-btn-border-color-active: var(--kt-ui-btn-secondary-grey-border-color-active);
  --ui-btn-border-color-disabled: var(--kt-ui-btn-secondary-grey-border-color-disabled);
  --kt-ui-btn-focus-offset-color: transparent;
}

/* Endregion */
/* Region secondary-blue button */
.ui-btn-secondary-blue {
  --ui-btn-color: var(--kt-ui-btn-secondary-blue-color);
  --ui-btn-color-hover: var(--kt-ui-btn-secondary-blue-color-hover);
  --ui-btn-color-active: var(--kt-ui-btn-secondary-blue-color-active);
  --ui-btn-color-disabled: var(--kt-ui-btn-secondary-blue-color-disabled);
  --ui-btn-background: var(--kt-ui-btn-secondary-blue-background);
  --ui-btn-background-hover: var(--kt-ui-btn-secondary-blue-background-hover);
  --ui-btn-background-active: var(--kt-ui-btn-secondary-blue-background-active);
  --ui-btn-background-disabled: var(--kt-ui-btn-secondary-blue-background-disabled);
  --ui-btn-border-color: var(--kt-ui-btn-secondary-blue-border-color);
  --ui-btn-border-color-hover: var(--kt-ui-btn-secondary-blue-border-color-hover);
  --ui-btn-border-color-active: var(--kt-ui-btn-secondary-blue-border-color-active);
  --ui-btn-border-color-disabled: var(--kt-ui-btn-secondary-blue-border-color-disabled);
  --kt-ui-btn-focus-offset-color: transparent;
}

/* Endregion */
/* Region secondary-blue button */
.ui-btn-secondary-dark-blue {
  --ui-btn-color: var(--kt-ui-btn-secondary-dark-blue-color);
  --ui-btn-color-hover: var(--kt-ui-btn-secondary-dark-blue-color-hover);
  --ui-btn-color-active: var(--kt-ui-btn-secondary-dark-blue-color-active);
  --ui-btn-color-disabled: var(--kt-ui-btn-secondary-dark-blue-color-disabled);
  --ui-btn-background: var(--kt-ui-btn-secondary-dark-blue-background);
  --ui-btn-background-hover: var(--kt-ui-btn-secondary-dark-blue-background-hover);
  --ui-btn-background-active: var(--kt-ui-btn-secondary-dark-blue-background-active);
  --ui-btn-background-disabled: var(--kt-ui-btn-secondary-dark-blue-background-disabled);
  --ui-btn-border-color: var(--kt-ui-btn-secondary-dark-blue-border-color);
  --ui-btn-border-color-hover: var(--kt-ui-btn-secondary-dark-blue-border-color-hover);
  --ui-btn-border-color-active: var(--kt-ui-btn-secondary-dark-blue-border-color-active);
  --ui-btn-border-color-disabled: var(--kt-ui-btn-secondary-dark-blue-border-color-disabled);
  --kt-ui-btn-focus-offset-color: transparent;
}

/* Endregion */
/* Region secondary-red button */
.ui-btn-secondary-red {
  --ui-btn-color: var(--kt-ui-btn-secondary-red-color);
  --ui-btn-color-hover: var(--kt-ui-btn-secondary-red-color-hover);
  --ui-btn-color-active: var(--kt-ui-btn-secondary-red-color-active);
  --ui-btn-color-disabled: var(--kt-ui-btn-secondary-red-color-disabled);
  --ui-btn-background: var(--kt-ui-btn-secondary-red-background);
  --ui-btn-background-hover: var(--kt-ui-btn-secondary-red-background-hover);
  --ui-btn-background-active: var(--kt-ui-btn-secondary-red-background-active);
  --ui-btn-background-disabled: var(--kt-ui-btn-secondary-red-background-disabled);
  --ui-btn-border-color: var(--kt-ui-btn-secondary-red-border-color);
  --ui-btn-border-color-hover: var(--kt-ui-btn-secondary-red-border-color-hover);
  --ui-btn-border-color-active: var(--kt-ui-btn-secondary-red-border-color-active);
  --ui-btn-border-color-disabled: var(--kt-ui-btn-secondary-red-border-color-disabled);
  --kt-ui-btn-focus-offset-color: transparent;
}

/* Endregion */
/* Region tertiary-light button */
.ui-btn-tertiary-light {
  --ui-btn-color: var(--kt-ui-btn-tertiary-light-color);
  --ui-btn-color-hover: var(--kt-ui-btn-tertiary-light-color-hover);
  --ui-btn-color-active: var(--kt-ui-btn-tertiary-light-color-active);
  --ui-btn-color-disabled: var(--kt-ui-btn-tertiary-light-color-disabled);
  --ui-btn-background: var(--kt-ui-btn-tertiary-light-background);
  --ui-btn-background-hover: var(--kt-ui-btn-tertiary-light-background-hover);
  --ui-btn-background-active: var(--kt-ui-btn-tertiary-light-background-active);
  --ui-btn-background-disabled: var(--kt-ui-btn-tertiary-light-background-disabled);
  --ui-btn-border-color: var(--kt-ui-btn-tertiary-light-border-color);
  --ui-btn-border-color-hover: var(--kt-ui-btn-tertiary-light-border-color-hover);
  --ui-btn-border-color-active: var(--kt-ui-btn-tertiary-light-border-color-active);
  --ui-btn-border-color-disabled: var(--kt-ui-btn-tertiary-light-border-color-disabled);
  --kt-ui-btn-focus-color: var(--kt-ui-palette-white);
  --kt-ui-btn-focus-offset-color: var(--kt-ui-color-focus);
}

.ui-btn.ui-btn-tertiary-light.ui-btn-wait,
.ui-btn-wait .ui-btn-main.ui-btn-tertiary-light {
  --ui-btn-wait-loader: var(--ui-btn-wait-black);
}

.ui-btn.ui-btn-tertiary-light.ui-btn-clock,
.ui-btn-clock .ui-btn-main.ui-btn-tertiary-light {
  --ui-btn-clock-loader: var(--ui-btn-clock-black);
}

/* Endregion */
/* Region primary-outlined button */
.ui-btn-light-border,
.ui-btn-primary-outlined {
  --ui-btn-color: var(--kt-ui-btn-light-border-color);
  --ui-btn-color-hover: var(--kt-ui-btn-light-border-color-hover);
  --ui-btn-color-active: var(--kt-ui-btn-light-border-color-active);
  --ui-btn-color-disabled: var(--kt-ui-btn-light-border-color-disabled);
  --ui-btn-background: var(--kt-ui-btn-light-border-background);
  --ui-btn-background-hover: var(--kt-ui-btn-light-border-background-hover);
  --ui-btn-background-active: var(--kt-ui-btn-light-border-background-active);
  --ui-btn-background-disabled: var(--kt-ui-btn-light-border-background-disabled);
  --ui-btn-border-color: var(--kt-ui-btn-light-border-border-color);
  --ui-btn-border-color-hover: var(--kt-ui-btn-light-border-border-color-hover);
  --ui-btn-border-color-active: var(--kt-ui-btn-light-border-border-color-active);
  --ui-btn-border-color-disabled: var(--kt-ui-btn-light-border-border-color-disabled);
  --kt-ui-btn-focus-offset-color: transparent;
}

/* Endregion */
/* Region Disabled */
.ui-btn.ui-btn-disabled,
.ui-btn.ui-btn-disabled:hover,
.ui-btn.ui-btn-disabled:active,
.ui-btn[disabled],
.ui-btn[disabled]:hover,
.ui-btn[disabled]:active,
.ui-btn-disabled .ui-btn-main,
.ui-btn-disabled .ui-btn-main:hover,
.ui-btn-disabled .ui-btn-main:active,
.ui-btn-disabled .ui-btn-extra,
.ui-btn-disabled .ui-btn-extra:hover,
.ui-btn-disabled .ui-btn-extra:active,
.ui-btn-disabled .ui-btn-menu,
.ui-btn-disabled .ui-btn-menu:hover,
.ui-btn-disabled .ui-btn-menu:active,
.ui-btn-main-disabled .ui-btn-main,
.ui-btn-main-disabled .ui-btn-main:hover,
.ui-btn-main-disabled .ui-btn-main:active,
.ui-btn-extra-disabled .ui-btn-extra,
.ui-btn-extra-disabled .ui-btn-extra:hover,
.ui-btn-extra-disabled .ui-btn-extra:active,
.ui-btn-menu-disabled .ui-btn-menu,
.ui-btn-menu-disabled .ui-btn-menu:hover,
.ui-btn-menu-disabled .ui-btn-menu:active {
  opacity: 1;
  cursor: not-allowed;
  color: var(--ui-btn-color-disabled);
  border-color: var(--ui-btn-border-color-disabled);
  background-color: var(--ui-btn-background-disabled);
}

/* Endregion */
/* Region buttons offset */
.ui-btn + .ui-btn,
.ui-btn + .ui-btn-double,
.ui-btn-double + .ui-btn,
.ui-btn-double + .ui-btn-double,
.ui-btn + .ui-btn-split,
.ui-btn-split + .ui-btn,
.ui-btn-split + .ui-btn-split,
.ui-btn + script + .ui-btn,
.ui-btn + script + .ui-btn-split,
.ui-btn-split + script + .ui-btn,
.ui-btn-split + script + .ui-btn-split,
.ui-ctl + .ui-btn,
.ui-ctl + .ui-btn-double,
.ui-ctl + .ui-btn-split {
  margin-left: var(--ui-btn-margin-left);
}

/* Endregion */
/* Region content */
.kt-ui-btn__content {
  display: flex;
  align-items: center;
}

.kt-ui-btn__icon--left + .kt-ui-btn__content,
.kt-ui-btn__content + .kt-ui-btn__icon--right {
  margin-left: var(--kt-ui-btn-content-gap);
}

/* Endregion */
/* Region Counter */
.ui-btn-counter {
  padding: var(--kt-ui-btn-counter-padding);
  border-radius: 50%;
  font-family: var(--kt-ui-btn-counter-ff);
  font-size: var(--kt-ui-btn-counter-font-size);
  line-height: var(--kt-ui-btn-counter-size);
  font-style: normal;
  color: var(--kt-ui-btn-counter-color);
  background-color: var(--kt-ui-btn-counter-background);
}

.ui-btn-lg .ui-btn-counter,
.ui-btn-text + .ui-btn-counter {
  margin-left: var(--ui-btn-margin-left);
}

/* Endregion */
/* Region Dropdown */
.ui-btn.ui-btn-dropdown,
.ui-btn-dropdown .ui-btn-main {
  padding-right: calc(var(--kt-ui-btn-padding-inline) + var(--kt-ui-btn-dropdown-size) + var(--kt-ui-btn-content-gap));
}

.ui-btn.ui-btn-dropdown::before,
.ui-btn-dropdown .ui-btn-main::before {
  content: "";
  width: var(--kt-ui-btn-dropdown-size);
  height: var(--kt-ui-btn-dropdown-size);
  position: absolute;
  top: 50%;
  right: var(--kt-ui-btn-padding-inline);
  box-sizing: border-box;
  margin-top: 0;
  border: none;
  -webkit-mask: var(--kt-ui-icon-chevron-down) no-repeat 50% 50%;
          mask: var(--kt-ui-icon-chevron-down) no-repeat 50% 50%;
  -webkit-mask-size: var(--kt-ui-btn-dropdown-icon-size);
          mask-size: var(--kt-ui-btn-dropdown-icon-size);
  background-color: currentColor;
  transform: translateY(-50%);
}

.ui-btn.ui-btn-empty.ui-btn-dropdown::before,
.ui-btn.ui-btn-collapsed.ui-btn-dropdown::before,
.ui-btn-empty.ui-btn-dropdown .ui-btn-main::before,
.ui-btn-collapsed.ui-btn-dropdown .ui-btn-main::before {
  transform: translate(-50%, -50%);
}

.ui-btn.ui-btn-empty.ui-btn-dropdown[class*=ui-btn-icon-]::before,
.ui-btn.ui-btn-collapsed.ui-btn-dropdown[class*=ui-btn-icon-]::before,
.ui-btn-empty.ui-btn-dropdown[class*=ui-btn-icon-] .ui-btn-main::before,
.ui-btn-collapsed.ui-btn-dropdown[class*=ui-btn-icon-] .ui-btn-main::before {
  transform: translateY(-50%);
}

/* Endregion */