@keyframes ty-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes ty-rotate-reverse {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(-360deg);
  }
}
@keyframes ty-processing {
  0% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  100% {
    transform: scale(2.8);
    opacity: 0;
  }
}
.ty-btn {
  --ty-button-current-text: var(--ty-button-solid-default-text, var(--ty-color-text));
  --ty-button-current-bg: var(--ty-button-solid-default-bg, var(--ty-color-bg-container));
  --ty-button-current-border: var(--ty-button-solid-default-border, var(--ty-color-border-btn-default));
  --ty-button-current-shadow: var(--ty-button-solid-default-shadow, none);
  --ty-button-current-text-hover: var(
    --ty-button-solid-default-text-hover,
    var(--ty-color-primary)
  );
  --ty-button-current-bg-hover: var(
    --ty-button-solid-default-bg-hover,
    var(--ty-color-bg-container)
  );
  --ty-button-current-border-hover: var(
    --ty-button-solid-default-border-hover,
    var(--ty-color-primary)
  );
  --ty-button-current-shadow-hover: var(
    --ty-button-solid-default-shadow-hover,
    none
  );
  --ty-button-current-text-active: var(
    --ty-button-solid-default-text-active,
    var(--ty-color-primary)
  );
  --ty-button-current-bg-active: var(
    --ty-button-solid-default-bg-active,
    var(--ty-color-fill)
  );
  --ty-button-current-border-active: var(
    --ty-button-solid-default-border-active,
    var(--ty-color-primary)
  );
  --ty-button-current-shadow-active: var(
    --ty-button-solid-default-shadow-active,
    none
  );
  box-sizing: border-box;
  border: 1px solid var(--ty-button-current-border);
  outline: none;
  letter-spacing: 0;
  text-align: center;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: var(--ty-button-min-width, auto);
  vertical-align: middle;
  text-decoration: none;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border-radius: var(--ty-button-radius, var(--ty-border-radius));
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  line-height: var(--ty-button-line-height, var(--ty-line-height-base));
  color: var(--ty-button-current-text);
  background: var(--ty-button-current-bg);
  border-color: var(--ty-button-current-border);
  box-shadow: var(--ty-button-current-shadow, none);
}
.ty-btn:hover {
  color: var(--ty-button-current-text-hover);
  background: var(--ty-button-current-bg-hover);
  border-color: var(--ty-button-current-border-hover);
  box-shadow: var(--ty-button-current-shadow-hover, var(--ty-button-current-shadow, none));
}
.ty-btn:focus {
  color: var(--ty-button-current-text-hover);
  background: var(--ty-button-current-bg-hover);
  border-color: var(--ty-button-current-border-hover);
  box-shadow: var(--ty-button-current-shadow-hover, var(--ty-button-current-shadow, none));
  z-index: 1;
}
.ty-btn:active {
  color: var(--ty-button-current-text-active);
  background: var(--ty-button-current-bg-active);
  border-color: var(--ty-button-current-border-active);
  box-shadow: var(--ty-button-current-shadow-active, var(--ty-button-current-shadow-hover, var(--ty-button-current-shadow, none)));
}
.ty-btn:disabled {
  color: var(--ty-button-disabled-text, var(--ty-color-text-quaternary));
  background-color: var(--ty-button-disabled-bg, var(--ty-color-bg-disabled));
  border-color: var(--ty-button-disabled-border, var(--ty-color-border));
  box-shadow: none;
}
.ty-btn__loader {
  display: inline-block;
  width: 1em;
  height: 1em;
  position: relative;
  border-width: 2px;
  border-color: currentcolor currentcolor transparent transparent;
  border-style: solid;
  border-radius: 50%;
  animation: ty-rotate-reverse 600ms infinite linear;
}
.ty-btn__icon-container, .ty-btn__loader {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  line-height: 1;
  font-size: var(--ty-button-icon-size-current, 1em);
}
.ty-btn__icon-container > svg {
  display: block;
}
.ty-btn__children {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.ty-btn_variant-solid.ty-btn_color-default {
  --ty-button-current-text: var(--ty-button-solid-default-text, var(--ty-color-text));
  --ty-button-current-bg: var(--ty-button-solid-default-bg, var(--ty-color-bg-container));
  --ty-button-current-border: var(--ty-button-solid-default-border, var(--ty-color-border-btn-default));
  --ty-button-current-shadow: var(--ty-button-solid-default-shadow, var(--ty-button-solid-default-shadow, var(--ty-shadow-control, none)));
  --ty-button-current-text-hover: var(
    --ty-button-solid-default-text-hover,
    var(--ty-color-primary)
  );
  --ty-button-current-bg-hover: var(
    --ty-button-solid-default-bg-hover,
    var(--ty-color-bg-container)
  );
  --ty-button-current-border-hover: var(
    --ty-button-solid-default-border-hover,
    var(--ty-color-primary)
  );
  --ty-button-current-shadow-hover: var(
    --ty-button-solid-default-shadow-hover,
    var(--ty-button-solid-default-shadow-hover, var(--ty-button-solid-default-shadow, var(--ty-shadow-control, none)))
  );
  --ty-button-current-text-active: var(
    --ty-button-solid-default-text-active,
    var(--ty-color-primary)
  );
  --ty-button-current-bg-active: var(
    --ty-button-solid-default-bg-active,
    var(--ty-color-fill)
  );
  --ty-button-current-border-active: var(
    --ty-button-solid-default-border-active,
    var(--ty-color-primary)
  );
  --ty-button-current-shadow-active: var(
    --ty-button-solid-default-shadow-active,
    var(--ty-button-solid-default-shadow-active, var(--ty-button-solid-default-shadow-hover, var(--ty-button-solid-default-shadow, var(--ty-shadow-control, none))))
  );
}
.ty-btn_variant-solid.ty-btn_color-primary {
  --ty-button-current-text: var(--ty-button-solid-primary-text, #fff);
  --ty-button-current-bg: var(--ty-button-solid-primary-bg, var(--ty-color-primary));
  --ty-button-current-border: var(--ty-button-solid-primary-border, var(--ty-color-primary));
  --ty-button-current-shadow: var(--ty-button-solid-primary-shadow, none);
  --ty-button-current-text-hover: var(
    --ty-button-solid-primary-text-hover,
    #fff
  );
  --ty-button-current-bg-hover: var(
    --ty-button-solid-primary-bg-hover,
    var(--ty-color-primary-hover)
  );
  --ty-button-current-border-hover: var(
    --ty-button-solid-primary-border-hover,
    var(--ty-color-primary-hover)
  );
  --ty-button-current-shadow-hover: var(
    --ty-button-solid-primary-shadow-hover,
    none
  );
  --ty-button-current-text-active: var(
    --ty-button-solid-primary-text-active,
    #fff
  );
  --ty-button-current-bg-active: var(
    --ty-button-solid-primary-bg-active,
    var(--ty-color-primary-active)
  );
  --ty-button-current-border-active: var(
    --ty-button-solid-primary-border-active,
    var(--ty-color-primary-active)
  );
  --ty-button-current-shadow-active: var(
    --ty-button-solid-primary-shadow-active,
    none
  );
}
.ty-btn_variant-solid.ty-btn_color-info {
  --ty-button-current-text: var(--ty-button-solid-info-text, #fff);
  --ty-button-current-bg: var(--ty-button-solid-info-bg, var(--ty-color-info));
  --ty-button-current-border: var(--ty-button-solid-info-border, var(--ty-color-info));
  --ty-button-current-shadow: var(--ty-button-solid-info-shadow, none);
  --ty-button-current-text-hover: var(
    --ty-button-solid-info-text-hover,
    #fff
  );
  --ty-button-current-bg-hover: var(
    --ty-button-solid-info-bg-hover,
    var(--ty-color-info-hover)
  );
  --ty-button-current-border-hover: var(
    --ty-button-solid-info-border-hover,
    var(--ty-color-info-hover)
  );
  --ty-button-current-shadow-hover: var(
    --ty-button-solid-info-shadow-hover,
    none
  );
  --ty-button-current-text-active: var(
    --ty-button-solid-info-text-active,
    #fff
  );
  --ty-button-current-bg-active: var(
    --ty-button-solid-info-bg-active,
    var(--ty-color-info-active)
  );
  --ty-button-current-border-active: var(
    --ty-button-solid-info-border-active,
    var(--ty-color-info-active)
  );
  --ty-button-current-shadow-active: var(
    --ty-button-solid-info-shadow-active,
    none
  );
}
.ty-btn_variant-solid.ty-btn_color-success {
  --ty-button-current-text: var(--ty-button-solid-success-text, #fff);
  --ty-button-current-bg: var(--ty-button-solid-success-bg, var(--ty-color-success));
  --ty-button-current-border: var(--ty-button-solid-success-border, var(--ty-color-success));
  --ty-button-current-shadow: var(--ty-button-solid-success-shadow, none);
  --ty-button-current-text-hover: var(
    --ty-button-solid-success-text-hover,
    #fff
  );
  --ty-button-current-bg-hover: var(
    --ty-button-solid-success-bg-hover,
    var(--ty-color-success-hover)
  );
  --ty-button-current-border-hover: var(
    --ty-button-solid-success-border-hover,
    var(--ty-color-success-hover)
  );
  --ty-button-current-shadow-hover: var(
    --ty-button-solid-success-shadow-hover,
    none
  );
  --ty-button-current-text-active: var(
    --ty-button-solid-success-text-active,
    #fff
  );
  --ty-button-current-bg-active: var(
    --ty-button-solid-success-bg-active,
    var(--ty-color-success-active)
  );
  --ty-button-current-border-active: var(
    --ty-button-solid-success-border-active,
    var(--ty-color-success-active)
  );
  --ty-button-current-shadow-active: var(
    --ty-button-solid-success-shadow-active,
    none
  );
}
.ty-btn_variant-solid.ty-btn_color-warning {
  --ty-button-current-text: var(--ty-button-solid-warning-text, #fff);
  --ty-button-current-bg: var(--ty-button-solid-warning-bg, var(--ty-color-warning));
  --ty-button-current-border: var(--ty-button-solid-warning-border, var(--ty-color-warning));
  --ty-button-current-shadow: var(--ty-button-solid-warning-shadow, none);
  --ty-button-current-text-hover: var(
    --ty-button-solid-warning-text-hover,
    #fff
  );
  --ty-button-current-bg-hover: var(
    --ty-button-solid-warning-bg-hover,
    var(--ty-color-warning-hover)
  );
  --ty-button-current-border-hover: var(
    --ty-button-solid-warning-border-hover,
    var(--ty-color-warning-hover)
  );
  --ty-button-current-shadow-hover: var(
    --ty-button-solid-warning-shadow-hover,
    none
  );
  --ty-button-current-text-active: var(
    --ty-button-solid-warning-text-active,
    #fff
  );
  --ty-button-current-bg-active: var(
    --ty-button-solid-warning-bg-active,
    var(--ty-color-warning-active)
  );
  --ty-button-current-border-active: var(
    --ty-button-solid-warning-border-active,
    var(--ty-color-warning-active)
  );
  --ty-button-current-shadow-active: var(
    --ty-button-solid-warning-shadow-active,
    none
  );
}
.ty-btn_variant-solid.ty-btn_color-danger {
  --ty-button-current-text: var(--ty-button-solid-danger-text, #fff);
  --ty-button-current-bg: var(--ty-button-solid-danger-bg, var(--ty-color-danger));
  --ty-button-current-border: var(--ty-button-solid-danger-border, var(--ty-color-danger));
  --ty-button-current-shadow: var(--ty-button-solid-danger-shadow, none);
  --ty-button-current-text-hover: var(
    --ty-button-solid-danger-text-hover,
    #fff
  );
  --ty-button-current-bg-hover: var(
    --ty-button-solid-danger-bg-hover,
    var(--ty-color-danger-hover)
  );
  --ty-button-current-border-hover: var(
    --ty-button-solid-danger-border-hover,
    var(--ty-color-danger-hover)
  );
  --ty-button-current-shadow-hover: var(
    --ty-button-solid-danger-shadow-hover,
    none
  );
  --ty-button-current-text-active: var(
    --ty-button-solid-danger-text-active,
    #fff
  );
  --ty-button-current-bg-active: var(
    --ty-button-solid-danger-bg-active,
    var(--ty-color-danger-active)
  );
  --ty-button-current-border-active: var(
    --ty-button-solid-danger-border-active,
    var(--ty-color-danger-active)
  );
  --ty-button-current-shadow-active: var(
    --ty-button-solid-danger-shadow-active,
    none
  );
}
.ty-btn_variant-outline.ty-btn_color-default {
  --ty-button-current-text: var(--ty-button-outline-default-text, var(--ty-color-text));
  --ty-button-current-bg: var(--ty-button-outline-default-bg, var(--ty-color-bg-container));
  --ty-button-current-border: var(--ty-button-outline-default-border, var(--ty-color-border-btn-default));
  --ty-button-current-shadow: var(--ty-button-outline-default-shadow, var(--ty-button-outline-default-shadow, var(--ty-shadow-control, none)));
  --ty-button-current-text-hover: var(
    --ty-button-outline-default-text-hover,
    var(--ty-color-text)
  );
  --ty-button-current-bg-hover: var(
    --ty-button-outline-default-bg-hover,
    var(--ty-color-fill)
  );
  --ty-button-current-border-hover: var(
    --ty-button-outline-default-border-hover,
    var(--ty-color-border)
  );
  --ty-button-current-shadow-hover: var(
    --ty-button-outline-default-shadow-hover,
    var(--ty-button-outline-default-shadow-hover, var(--ty-button-outline-default-shadow, var(--ty-shadow-control, none)))
  );
  --ty-button-current-text-active: var(
    --ty-button-outline-default-text-active,
    var(--ty-color-text)
  );
  --ty-button-current-bg-active: var(
    --ty-button-outline-default-bg-active,
    var(--ty-color-fill-secondary)
  );
  --ty-button-current-border-active: var(
    --ty-button-outline-default-border-active,
    var(--ty-color-border-secondary)
  );
  --ty-button-current-shadow-active: var(
    --ty-button-outline-default-shadow-active,
    var(--ty-button-outline-default-shadow-active, var(--ty-button-outline-default-shadow-hover, var(--ty-button-outline-default-shadow, var(--ty-shadow-control, none))))
  );
}
.ty-btn_variant-outline.ty-btn_color-primary {
  --ty-button-current-text: var(--ty-button-outline-primary-text, var(--ty-color-primary));
  --ty-button-current-bg: var(--ty-button-outline-primary-bg, var(--ty-color-bg-container));
  --ty-button-current-border: var(--ty-button-outline-primary-border, var(--ty-color-primary));
  --ty-button-current-shadow: var(--ty-button-outline-primary-shadow, none);
  --ty-button-current-text-hover: var(
    --ty-button-outline-primary-text-hover,
    var(--ty-color-primary)
  );
  --ty-button-current-bg-hover: var(
    --ty-button-outline-primary-bg-hover,
    var(--ty-color-primary-bg)
  );
  --ty-button-current-border-hover: var(
    --ty-button-outline-primary-border-hover,
    var(--ty-color-primary-hover)
  );
  --ty-button-current-shadow-hover: var(
    --ty-button-outline-primary-shadow-hover,
    none
  );
  --ty-button-current-text-active: var(
    --ty-button-outline-primary-text-active,
    var(--ty-color-primary)
  );
  --ty-button-current-bg-active: var(
    --ty-button-outline-primary-bg-active,
    var(--ty-color-primary-bg-hover)
  );
  --ty-button-current-border-active: var(
    --ty-button-outline-primary-border-active,
    var(--ty-color-primary-active)
  );
  --ty-button-current-shadow-active: var(
    --ty-button-outline-primary-shadow-active,
    none
  );
}
.ty-btn_variant-outline.ty-btn_color-info {
  --ty-button-current-text: var(--ty-button-outline-info-text, var(--ty-color-info));
  --ty-button-current-bg: var(--ty-button-outline-info-bg, var(--ty-color-bg-container));
  --ty-button-current-border: var(--ty-button-outline-info-border, var(--ty-color-info));
  --ty-button-current-shadow: var(--ty-button-outline-info-shadow, none);
  --ty-button-current-text-hover: var(
    --ty-button-outline-info-text-hover,
    var(--ty-color-info)
  );
  --ty-button-current-bg-hover: var(
    --ty-button-outline-info-bg-hover,
    rgba(64, 169, 255, 0.12)
  );
  --ty-button-current-border-hover: var(
    --ty-button-outline-info-border-hover,
    var(--ty-color-info-hover)
  );
  --ty-button-current-shadow-hover: var(
    --ty-button-outline-info-shadow-hover,
    none
  );
  --ty-button-current-text-active: var(
    --ty-button-outline-info-text-active,
    var(--ty-color-info)
  );
  --ty-button-current-bg-active: var(
    --ty-button-outline-info-bg-active,
    rgba(64, 169, 255, 0.18)
  );
  --ty-button-current-border-active: var(
    --ty-button-outline-info-border-active,
    var(--ty-color-info-active)
  );
  --ty-button-current-shadow-active: var(
    --ty-button-outline-info-shadow-active,
    none
  );
}
.ty-btn_variant-outline.ty-btn_color-success {
  --ty-button-current-text: var(--ty-button-outline-success-text, var(--ty-color-success));
  --ty-button-current-bg: var(--ty-button-outline-success-bg, var(--ty-color-bg-container));
  --ty-button-current-border: var(--ty-button-outline-success-border, var(--ty-color-success));
  --ty-button-current-shadow: var(--ty-button-outline-success-shadow, none);
  --ty-button-current-text-hover: var(
    --ty-button-outline-success-text-hover,
    var(--ty-color-success)
  );
  --ty-button-current-bg-hover: var(
    --ty-button-outline-success-bg-hover,
    rgba(82, 196, 26, 0.12)
  );
  --ty-button-current-border-hover: var(
    --ty-button-outline-success-border-hover,
    var(--ty-color-success-hover)
  );
  --ty-button-current-shadow-hover: var(
    --ty-button-outline-success-shadow-hover,
    none
  );
  --ty-button-current-text-active: var(
    --ty-button-outline-success-text-active,
    var(--ty-color-success)
  );
  --ty-button-current-bg-active: var(
    --ty-button-outline-success-bg-active,
    rgba(82, 196, 26, 0.18)
  );
  --ty-button-current-border-active: var(
    --ty-button-outline-success-border-active,
    var(--ty-color-success-active)
  );
  --ty-button-current-shadow-active: var(
    --ty-button-outline-success-shadow-active,
    none
  );
}
.ty-btn_variant-outline.ty-btn_color-warning {
  --ty-button-current-text: var(--ty-button-outline-warning-text, var(--ty-color-warning));
  --ty-button-current-bg: var(--ty-button-outline-warning-bg, var(--ty-color-bg-container));
  --ty-button-current-border: var(--ty-button-outline-warning-border, var(--ty-color-warning));
  --ty-button-current-shadow: var(--ty-button-outline-warning-shadow, none);
  --ty-button-current-text-hover: var(
    --ty-button-outline-warning-text-hover,
    var(--ty-color-warning)
  );
  --ty-button-current-bg-hover: var(
    --ty-button-outline-warning-bg-hover,
    rgba(250, 173, 20, 0.12)
  );
  --ty-button-current-border-hover: var(
    --ty-button-outline-warning-border-hover,
    var(--ty-color-warning-hover)
  );
  --ty-button-current-shadow-hover: var(
    --ty-button-outline-warning-shadow-hover,
    none
  );
  --ty-button-current-text-active: var(
    --ty-button-outline-warning-text-active,
    var(--ty-color-warning)
  );
  --ty-button-current-bg-active: var(
    --ty-button-outline-warning-bg-active,
    rgba(250, 173, 20, 0.18)
  );
  --ty-button-current-border-active: var(
    --ty-button-outline-warning-border-active,
    var(--ty-color-warning-active)
  );
  --ty-button-current-shadow-active: var(
    --ty-button-outline-warning-shadow-active,
    none
  );
}
.ty-btn_variant-outline.ty-btn_color-danger {
  --ty-button-current-text: var(--ty-button-outline-danger-text, var(--ty-color-danger));
  --ty-button-current-bg: var(--ty-button-outline-danger-bg, var(--ty-color-bg-container));
  --ty-button-current-border: var(--ty-button-outline-danger-border, var(--ty-color-danger));
  --ty-button-current-shadow: var(--ty-button-outline-danger-shadow, none);
  --ty-button-current-text-hover: var(
    --ty-button-outline-danger-text-hover,
    var(--ty-color-danger)
  );
  --ty-button-current-bg-hover: var(
    --ty-button-outline-danger-bg-hover,
    rgba(255, 77, 79, 0.12)
  );
  --ty-button-current-border-hover: var(
    --ty-button-outline-danger-border-hover,
    var(--ty-color-danger-hover)
  );
  --ty-button-current-shadow-hover: var(
    --ty-button-outline-danger-shadow-hover,
    none
  );
  --ty-button-current-text-active: var(
    --ty-button-outline-danger-text-active,
    var(--ty-color-danger)
  );
  --ty-button-current-bg-active: var(
    --ty-button-outline-danger-bg-active,
    rgba(255, 77, 79, 0.18)
  );
  --ty-button-current-border-active: var(
    --ty-button-outline-danger-border-active,
    var(--ty-color-danger-active)
  );
  --ty-button-current-shadow-active: var(
    --ty-button-outline-danger-shadow-active,
    none
  );
}
.ty-btn_variant-ghost.ty-btn_color-default {
  --ty-button-current-text: var(--ty-button-ghost-default-text, var(--ty-color-text));
  --ty-button-current-bg: var(--ty-button-ghost-default-bg, transparent);
  --ty-button-current-border: var(--ty-button-ghost-default-border, transparent);
  --ty-button-current-shadow: var(--ty-button-ghost-default-shadow, none);
  --ty-button-current-text-hover: var(
    --ty-button-ghost-default-text-hover,
    var(--ty-color-text)
  );
  --ty-button-current-bg-hover: var(
    --ty-button-ghost-default-bg-hover,
    var(--ty-color-fill)
  );
  --ty-button-current-border-hover: var(
    --ty-button-ghost-default-border-hover,
    transparent
  );
  --ty-button-current-shadow-hover: var(
    --ty-button-ghost-default-shadow-hover,
    none
  );
  --ty-button-current-text-active: var(
    --ty-button-ghost-default-text-active,
    var(--ty-color-text)
  );
  --ty-button-current-bg-active: var(
    --ty-button-ghost-default-bg-active,
    var(--ty-color-fill-secondary)
  );
  --ty-button-current-border-active: var(
    --ty-button-ghost-default-border-active,
    transparent
  );
  --ty-button-current-shadow-active: var(
    --ty-button-ghost-default-shadow-active,
    none
  );
}
.ty-btn_variant-ghost.ty-btn_color-primary {
  --ty-button-current-text: var(--ty-button-ghost-primary-text, var(--ty-color-primary));
  --ty-button-current-bg: var(--ty-button-ghost-primary-bg, transparent);
  --ty-button-current-border: var(--ty-button-ghost-primary-border, transparent);
  --ty-button-current-shadow: var(--ty-button-ghost-primary-shadow, none);
  --ty-button-current-text-hover: var(
    --ty-button-ghost-primary-text-hover,
    var(--ty-color-primary)
  );
  --ty-button-current-bg-hover: var(
    --ty-button-ghost-primary-bg-hover,
    var(--ty-color-primary-bg)
  );
  --ty-button-current-border-hover: var(
    --ty-button-ghost-primary-border-hover,
    transparent
  );
  --ty-button-current-shadow-hover: var(
    --ty-button-ghost-primary-shadow-hover,
    none
  );
  --ty-button-current-text-active: var(
    --ty-button-ghost-primary-text-active,
    var(--ty-color-primary)
  );
  --ty-button-current-bg-active: var(
    --ty-button-ghost-primary-bg-active,
    var(--ty-color-primary-bg-hover)
  );
  --ty-button-current-border-active: var(
    --ty-button-ghost-primary-border-active,
    transparent
  );
  --ty-button-current-shadow-active: var(
    --ty-button-ghost-primary-shadow-active,
    none
  );
}
.ty-btn_variant-ghost.ty-btn_color-info {
  --ty-button-current-text: var(--ty-button-ghost-info-text, var(--ty-color-info));
  --ty-button-current-bg: var(--ty-button-ghost-info-bg, transparent);
  --ty-button-current-border: var(--ty-button-ghost-info-border, transparent);
  --ty-button-current-shadow: var(--ty-button-ghost-info-shadow, none);
  --ty-button-current-text-hover: var(
    --ty-button-ghost-info-text-hover,
    var(--ty-color-info)
  );
  --ty-button-current-bg-hover: var(
    --ty-button-ghost-info-bg-hover,
    rgba(64, 169, 255, 0.12)
  );
  --ty-button-current-border-hover: var(
    --ty-button-ghost-info-border-hover,
    transparent
  );
  --ty-button-current-shadow-hover: var(
    --ty-button-ghost-info-shadow-hover,
    none
  );
  --ty-button-current-text-active: var(
    --ty-button-ghost-info-text-active,
    var(--ty-color-info)
  );
  --ty-button-current-bg-active: var(
    --ty-button-ghost-info-bg-active,
    rgba(64, 169, 255, 0.18)
  );
  --ty-button-current-border-active: var(
    --ty-button-ghost-info-border-active,
    transparent
  );
  --ty-button-current-shadow-active: var(
    --ty-button-ghost-info-shadow-active,
    none
  );
}
.ty-btn_variant-ghost.ty-btn_color-success {
  --ty-button-current-text: var(--ty-button-ghost-success-text, var(--ty-color-success));
  --ty-button-current-bg: var(--ty-button-ghost-success-bg, transparent);
  --ty-button-current-border: var(--ty-button-ghost-success-border, transparent);
  --ty-button-current-shadow: var(--ty-button-ghost-success-shadow, none);
  --ty-button-current-text-hover: var(
    --ty-button-ghost-success-text-hover,
    var(--ty-color-success)
  );
  --ty-button-current-bg-hover: var(
    --ty-button-ghost-success-bg-hover,
    rgba(82, 196, 26, 0.12)
  );
  --ty-button-current-border-hover: var(
    --ty-button-ghost-success-border-hover,
    transparent
  );
  --ty-button-current-shadow-hover: var(
    --ty-button-ghost-success-shadow-hover,
    none
  );
  --ty-button-current-text-active: var(
    --ty-button-ghost-success-text-active,
    var(--ty-color-success)
  );
  --ty-button-current-bg-active: var(
    --ty-button-ghost-success-bg-active,
    rgba(82, 196, 26, 0.18)
  );
  --ty-button-current-border-active: var(
    --ty-button-ghost-success-border-active,
    transparent
  );
  --ty-button-current-shadow-active: var(
    --ty-button-ghost-success-shadow-active,
    none
  );
}
.ty-btn_variant-ghost.ty-btn_color-warning {
  --ty-button-current-text: var(--ty-button-ghost-warning-text, var(--ty-color-warning));
  --ty-button-current-bg: var(--ty-button-ghost-warning-bg, transparent);
  --ty-button-current-border: var(--ty-button-ghost-warning-border, transparent);
  --ty-button-current-shadow: var(--ty-button-ghost-warning-shadow, none);
  --ty-button-current-text-hover: var(
    --ty-button-ghost-warning-text-hover,
    var(--ty-color-warning)
  );
  --ty-button-current-bg-hover: var(
    --ty-button-ghost-warning-bg-hover,
    rgba(250, 173, 20, 0.12)
  );
  --ty-button-current-border-hover: var(
    --ty-button-ghost-warning-border-hover,
    transparent
  );
  --ty-button-current-shadow-hover: var(
    --ty-button-ghost-warning-shadow-hover,
    none
  );
  --ty-button-current-text-active: var(
    --ty-button-ghost-warning-text-active,
    var(--ty-color-warning)
  );
  --ty-button-current-bg-active: var(
    --ty-button-ghost-warning-bg-active,
    rgba(250, 173, 20, 0.18)
  );
  --ty-button-current-border-active: var(
    --ty-button-ghost-warning-border-active,
    transparent
  );
  --ty-button-current-shadow-active: var(
    --ty-button-ghost-warning-shadow-active,
    none
  );
}
.ty-btn_variant-ghost.ty-btn_color-danger {
  --ty-button-current-text: var(--ty-button-ghost-danger-text, var(--ty-color-danger));
  --ty-button-current-bg: var(--ty-button-ghost-danger-bg, transparent);
  --ty-button-current-border: var(--ty-button-ghost-danger-border, transparent);
  --ty-button-current-shadow: var(--ty-button-ghost-danger-shadow, none);
  --ty-button-current-text-hover: var(
    --ty-button-ghost-danger-text-hover,
    var(--ty-color-danger)
  );
  --ty-button-current-bg-hover: var(
    --ty-button-ghost-danger-bg-hover,
    rgba(255, 77, 79, 0.12)
  );
  --ty-button-current-border-hover: var(
    --ty-button-ghost-danger-border-hover,
    transparent
  );
  --ty-button-current-shadow-hover: var(
    --ty-button-ghost-danger-shadow-hover,
    none
  );
  --ty-button-current-text-active: var(
    --ty-button-ghost-danger-text-active,
    var(--ty-color-danger)
  );
  --ty-button-current-bg-active: var(
    --ty-button-ghost-danger-bg-active,
    rgba(255, 77, 79, 0.18)
  );
  --ty-button-current-border-active: var(
    --ty-button-ghost-danger-border-active,
    transparent
  );
  --ty-button-current-shadow-active: var(
    --ty-button-ghost-danger-shadow-active,
    none
  );
}
.ty-btn_variant-link.ty-btn_color-default {
  --ty-button-current-text: var(--ty-button-link-default-text, var(--ty-color-text));
  --ty-button-current-bg: var(--ty-button-link-default-bg, transparent);
  --ty-button-current-border: var(--ty-button-link-default-border, transparent);
  --ty-button-current-shadow: var(--ty-button-link-default-shadow, none);
  --ty-button-current-text-hover: var(
    --ty-button-link-default-text-hover,
    var(--ty-color-text)
  );
  --ty-button-current-bg-hover: var(
    --ty-button-link-default-bg-hover,
    transparent
  );
  --ty-button-current-border-hover: var(
    --ty-button-link-default-border-hover,
    transparent
  );
  --ty-button-current-shadow-hover: var(
    --ty-button-link-default-shadow-hover,
    none
  );
  --ty-button-current-text-active: var(
    --ty-button-link-default-text-active,
    var(--ty-color-text)
  );
  --ty-button-current-bg-active: var(
    --ty-button-link-default-bg-active,
    transparent
  );
  --ty-button-current-border-active: var(
    --ty-button-link-default-border-active,
    transparent
  );
  --ty-button-current-shadow-active: var(
    --ty-button-link-default-shadow-active,
    none
  );
}
.ty-btn_variant-link.ty-btn_color-primary {
  --ty-button-current-text: var(--ty-button-link-primary-text, var(--ty-color-primary));
  --ty-button-current-bg: var(--ty-button-link-primary-bg, transparent);
  --ty-button-current-border: var(--ty-button-link-primary-border, transparent);
  --ty-button-current-shadow: var(--ty-button-link-primary-shadow, none);
  --ty-button-current-text-hover: var(
    --ty-button-link-primary-text-hover,
    var(--ty-color-primary)
  );
  --ty-button-current-bg-hover: var(
    --ty-button-link-primary-bg-hover,
    transparent
  );
  --ty-button-current-border-hover: var(
    --ty-button-link-primary-border-hover,
    transparent
  );
  --ty-button-current-shadow-hover: var(
    --ty-button-link-primary-shadow-hover,
    none
  );
  --ty-button-current-text-active: var(
    --ty-button-link-primary-text-active,
    var(--ty-color-primary)
  );
  --ty-button-current-bg-active: var(
    --ty-button-link-primary-bg-active,
    transparent
  );
  --ty-button-current-border-active: var(
    --ty-button-link-primary-border-active,
    transparent
  );
  --ty-button-current-shadow-active: var(
    --ty-button-link-primary-shadow-active,
    none
  );
}
.ty-btn_variant-link.ty-btn_color-info {
  --ty-button-current-text: var(--ty-button-link-info-text, var(--ty-color-info));
  --ty-button-current-bg: var(--ty-button-link-info-bg, transparent);
  --ty-button-current-border: var(--ty-button-link-info-border, transparent);
  --ty-button-current-shadow: var(--ty-button-link-info-shadow, none);
  --ty-button-current-text-hover: var(
    --ty-button-link-info-text-hover,
    var(--ty-color-info)
  );
  --ty-button-current-bg-hover: var(
    --ty-button-link-info-bg-hover,
    transparent
  );
  --ty-button-current-border-hover: var(
    --ty-button-link-info-border-hover,
    transparent
  );
  --ty-button-current-shadow-hover: var(
    --ty-button-link-info-shadow-hover,
    none
  );
  --ty-button-current-text-active: var(
    --ty-button-link-info-text-active,
    var(--ty-color-info)
  );
  --ty-button-current-bg-active: var(
    --ty-button-link-info-bg-active,
    transparent
  );
  --ty-button-current-border-active: var(
    --ty-button-link-info-border-active,
    transparent
  );
  --ty-button-current-shadow-active: var(
    --ty-button-link-info-shadow-active,
    none
  );
}
.ty-btn_variant-link.ty-btn_color-success {
  --ty-button-current-text: var(--ty-button-link-success-text, var(--ty-color-success));
  --ty-button-current-bg: var(--ty-button-link-success-bg, transparent);
  --ty-button-current-border: var(--ty-button-link-success-border, transparent);
  --ty-button-current-shadow: var(--ty-button-link-success-shadow, none);
  --ty-button-current-text-hover: var(
    --ty-button-link-success-text-hover,
    var(--ty-color-success)
  );
  --ty-button-current-bg-hover: var(
    --ty-button-link-success-bg-hover,
    transparent
  );
  --ty-button-current-border-hover: var(
    --ty-button-link-success-border-hover,
    transparent
  );
  --ty-button-current-shadow-hover: var(
    --ty-button-link-success-shadow-hover,
    none
  );
  --ty-button-current-text-active: var(
    --ty-button-link-success-text-active,
    var(--ty-color-success)
  );
  --ty-button-current-bg-active: var(
    --ty-button-link-success-bg-active,
    transparent
  );
  --ty-button-current-border-active: var(
    --ty-button-link-success-border-active,
    transparent
  );
  --ty-button-current-shadow-active: var(
    --ty-button-link-success-shadow-active,
    none
  );
}
.ty-btn_variant-link.ty-btn_color-warning {
  --ty-button-current-text: var(--ty-button-link-warning-text, var(--ty-color-warning));
  --ty-button-current-bg: var(--ty-button-link-warning-bg, transparent);
  --ty-button-current-border: var(--ty-button-link-warning-border, transparent);
  --ty-button-current-shadow: var(--ty-button-link-warning-shadow, none);
  --ty-button-current-text-hover: var(
    --ty-button-link-warning-text-hover,
    var(--ty-color-warning)
  );
  --ty-button-current-bg-hover: var(
    --ty-button-link-warning-bg-hover,
    transparent
  );
  --ty-button-current-border-hover: var(
    --ty-button-link-warning-border-hover,
    transparent
  );
  --ty-button-current-shadow-hover: var(
    --ty-button-link-warning-shadow-hover,
    none
  );
  --ty-button-current-text-active: var(
    --ty-button-link-warning-text-active,
    var(--ty-color-warning)
  );
  --ty-button-current-bg-active: var(
    --ty-button-link-warning-bg-active,
    transparent
  );
  --ty-button-current-border-active: var(
    --ty-button-link-warning-border-active,
    transparent
  );
  --ty-button-current-shadow-active: var(
    --ty-button-link-warning-shadow-active,
    none
  );
}
.ty-btn_variant-link.ty-btn_color-danger {
  --ty-button-current-text: var(--ty-button-link-danger-text, var(--ty-color-danger));
  --ty-button-current-bg: var(--ty-button-link-danger-bg, transparent);
  --ty-button-current-border: var(--ty-button-link-danger-border, transparent);
  --ty-button-current-shadow: var(--ty-button-link-danger-shadow, none);
  --ty-button-current-text-hover: var(
    --ty-button-link-danger-text-hover,
    var(--ty-color-danger)
  );
  --ty-button-current-bg-hover: var(
    --ty-button-link-danger-bg-hover,
    transparent
  );
  --ty-button-current-border-hover: var(
    --ty-button-link-danger-border-hover,
    transparent
  );
  --ty-button-current-shadow-hover: var(
    --ty-button-link-danger-shadow-hover,
    none
  );
  --ty-button-current-text-active: var(
    --ty-button-link-danger-text-active,
    var(--ty-color-danger)
  );
  --ty-button-current-bg-active: var(
    --ty-button-link-danger-bg-active,
    transparent
  );
  --ty-button-current-border-active: var(
    --ty-button-link-danger-border-active,
    transparent
  );
  --ty-button-current-shadow-active: var(
    --ty-button-link-danger-shadow-active,
    none
  );
}
.ty-btn_variant-link:hover {
  text-decoration-line: underline;
}
.ty-btn_variant-link:disabled {
  color: var(--ty-button-text-link-disabled, var(--ty-color-text-quaternary));
  background-color: transparent;
  border-color: transparent;
  text-decoration-line: none;
}
.ty-btn_sm {
  --ty-button-height-current: var(--ty-button-height-sm, var(--ty-height-sm));
  --ty-button-gap-current: var(--ty-button-gap-sm, 4px);
  --ty-button-icon-size-current: var(--ty-button-icon-size-sm, 14px);
  height: var(--ty-button-height-sm, var(--ty-height-sm));
  padding: 0 var(--ty-button-padding-inline-sm, var(--ty-button-padding-inline-sm, var(--ty-control-padding-inline-sm)));
  font-size: var(--ty-button-font-size-sm, var(--ty-font-size-sm));
  gap: var(--ty-button-gap-sm, 4px);
}
.ty-btn_md {
  --ty-button-height-current: var(--ty-button-height-md, var(--ty-height-md));
  --ty-button-gap-current: var(--ty-button-gap-md, 6px);
  --ty-button-icon-size-current: var(--ty-button-icon-size-md, 16px);
  height: var(--ty-button-height-md, var(--ty-height-md));
  padding: 0 var(--ty-button-padding-inline-md, var(--ty-button-padding-inline-md, var(--ty-control-padding-inline-md)));
  font-size: var(--ty-button-font-size-md, var(--ty-font-size-base));
  gap: var(--ty-button-gap-md, 6px);
}
.ty-btn_lg {
  --ty-button-height-current: var(--ty-button-height-lg, var(--ty-height-lg));
  --ty-button-gap-current: var(--ty-button-gap-lg, 8px);
  --ty-button-icon-size-current: var(--ty-button-icon-size-lg, 18px);
  height: var(--ty-button-height-lg, var(--ty-height-lg));
  padding: 0 var(--ty-button-padding-inline-lg, var(--ty-button-padding-inline-lg, var(--ty-control-padding-inline-lg)));
  font-size: var(--ty-button-font-size-lg, var(--ty-font-size-lg));
  gap: var(--ty-button-gap-lg, 8px);
}
.ty-btn_icon-only {
  width: var(--ty-button-height-current);
  min-width: var(--ty-button-height-current);
  padding-inline: 0;
}
.ty-btn_block {
  width: 100%;
}
.ty-btn_block + .ty-btn_block {
  margin: 0;
}
.ty-btn_round {
  border-radius: var(--ty-button-round-radius, var(--ty-height-lg));
}
.ty-btn_circle {
  border-radius: 50%;
}
.ty-btn_loading {
  position: relative;
  pointer-events: none;
}
.ty-btn_loading::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 1;
  display: block;
  background: var(--ty-button-loading-bg, var(--ty-color-bg-container));
  border-radius: inherit;
  opacity: var(--ty-button-loading-opacity, var(--ty-button-loading-opacity));
  transition: opacity 0.2s;
}
.ty-btn_loading:disabled {
  color: var(--ty-button-current-text);
  background-color: var(--ty-button-current-bg);
  border-color: var(--ty-button-current-border);
}
.ty-btn_disabled {
  cursor: not-allowed;
}

.ty-btn-group {
  display: inline-block;
}
.ty-btn-group + .ty-btn-group {
  margin-left: var(--ty-button-group-gap, 0);
}
.ty-btn-group .ty-btn {
  position: relative;
  border-radius: 0;
  float: left;
}
.ty-btn-group .ty-btn + .ty-btn {
  margin-left: calc(-1 * var(--ty-control-group-border-width, 1px));
}
.ty-btn-group .ty-btn:hover {
  z-index: var(--ty-control-group-focus-z-index, 1);
}
.ty-btn-group .ty-btn:first-child {
  border-top-left-radius: var(--ty-control-group-radius, var(--ty-button-radius, var(--ty-border-radius)));
  border-bottom-left-radius: var(--ty-control-group-radius, var(--ty-button-radius, var(--ty-border-radius)));
}
.ty-btn-group .ty-btn:last-child {
  border-top-right-radius: var(--ty-control-group-radius, var(--ty-button-radius, var(--ty-border-radius)));
  border-bottom-right-radius: var(--ty-control-group-radius, var(--ty-button-radius, var(--ty-border-radius)));
}
.ty-btn-group_round .ty-btn:first-child {
  border-top-left-radius: var(--ty-button-round-radius, var(--ty-height-lg));
  border-bottom-left-radius: var(--ty-button-round-radius, var(--ty-height-lg));
}
.ty-btn-group_round .ty-btn:last-child {
  border-top-right-radius: var(--ty-button-round-radius, var(--ty-height-lg));
  border-bottom-right-radius: var(--ty-button-round-radius, var(--ty-height-lg));
}
.ty-btn-group_variant-solid.ty-btn-group_color-primary .ty-btn:not(:first-child), .ty-btn-group_variant-solid.ty-btn-group_color-info .ty-btn:not(:first-child), .ty-btn-group_variant-solid.ty-btn-group_color-success .ty-btn:not(:first-child), .ty-btn-group_variant-solid.ty-btn-group_color-warning .ty-btn:not(:first-child), .ty-btn-group_variant-solid.ty-btn-group_color-danger .ty-btn:not(:first-child) {
  border-left-color: var(--ty-button-group-divider-color, var(--ty-control-group-divider-color, var(--ty-color-border-secondary)));
}