.ty-input-number {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  --ty-input-number-height-current: var(--ty-input-number-height-md, var(--ty-control-height-md, var(--ty-height-md)));
  --ty-input-number-font-size-current: var(--ty-input-number-font-size-md, var(--ty-control-font-size-md, var(--ty-font-size-base)));
  --ty-input-number-padding-inline-current: var(--ty-input-padding-inline-md, var(--ty-control-padding-inline-md, 12px));
}
.ty-input-number:hover .ty-input-number__controls {
  opacity: 1;
}
.ty-input-number__input {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  color: var(--ty-input-color, var(--ty-color-text));
  border: 1px solid var(--ty-input-border);
  transition: all 0.3s;
  outline: 0;
  border-radius: var(--ty-input-radius, var(--ty-border-radius));
  font-size: var(--ty-input-font-size-md, var(--ty-font-size-base));
  background-color: var(--ty-input-bg, var(--ty-color-bg-container));
  box-shadow: var(--ty-input-shadow, none);
}
.ty-input-number__input:hover {
  border-color: var(--ty-input-border-hover, var(--ty-color-primary));
}
.ty-input-number__input:focus {
  border-color: var(--ty-input-border-focus, var(--ty-color-primary));
  box-shadow: var(--ty-input-shadow-focus, var(--ty-shadow-focus));
}
.ty-input-number__input::-moz-placeholder {
  color: var(--ty-input-placeholder, var(--ty-color-text-placeholder));
}
.ty-input-number__input::placeholder {
  color: var(--ty-input-placeholder, var(--ty-color-text-placeholder));
}
.ty-input-number__input {
  height: var(--ty-input-number-height-current);
  font-size: var(--ty-input-number-font-size-current);
  line-height: var(--ty-line-height-base);
  padding-left: var(--ty-input-number-input-padding-inline-start, var(--ty-input-number-padding-inline-current));
  padding-right: var(--ty-input-number-input-padding-inline-end, calc(var(--ty-input-number-padding-inline-current) + 20px));
}
.ty-input-number__input::-webkit-inner-spin-button, .ty-input-number__input::-webkit-outer-spin-button {
  -webkit-appearance: none;
          appearance: none;
}
.ty-input-number__controls {
  box-sizing: border-box;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--ty-input-number-controls-padding);
  opacity: 0;
  transition: all var(--ty-input-number-control-transition-duration);
}
.ty-input-number__up, .ty-input-number__down {
  cursor: pointer;
  box-sizing: border-box;
  flex: 1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: var(--ty-input-number-control-padding-inline);
  border-left: 1px solid var(--ty-input-number-control-border);
  transition: all var(--ty-input-number-control-transition-duration);
}
.ty-input-number__up:hover, .ty-input-number__down:hover {
  flex: 2;
}
.ty-input-number__up:hover .ty-icon, .ty-input-number__down:hover .ty-icon {
  color: var(--ty-input-number-icon-color-hover) !important;
}
.ty-input-number__up:active, .ty-input-number__down:active {
  background-color: var(--ty-input-number-control-active-bg);
}
.ty-input-number__up {
  border-bottom: 1px solid var(--ty-input-number-control-border);
}
.ty-input-number__down {
  padding-top: 1px;
}
.ty-input-number__icon {
  color: var(--ty-input-number-icon-color);
}
.ty-input-number__icon_reverse {
  transform: rotate(180deg);
}
.ty-input-number_sm {
  --ty-input-number-height-current: var(--ty-input-number-height-sm, var(--ty-control-height-sm, var(--ty-height-sm)));
  --ty-input-number-font-size-current: var(--ty-input-number-font-size-sm, var(--ty-control-font-size-sm, var(--ty-font-size-sm)));
  --ty-input-number-padding-inline-current: var(--ty-input-padding-inline-sm, var(--ty-control-padding-inline-sm, 8px));
}
.ty-input-number_md {
  --ty-input-number-height-current: var(--ty-input-number-height-md, var(--ty-control-height-md, var(--ty-height-md)));
  --ty-input-number-font-size-current: var(--ty-input-number-font-size-md, var(--ty-control-font-size-md, var(--ty-font-size-base)));
  --ty-input-number-padding-inline-current: var(--ty-input-padding-inline-md, var(--ty-control-padding-inline-md, 12px));
}
.ty-input-number_lg {
  --ty-input-number-height-current: var(--ty-input-number-height-lg, var(--ty-control-height-lg, var(--ty-height-lg)));
  --ty-input-number-font-size-current: var(--ty-input-number-font-size-lg, var(--ty-control-font-size-lg, var(--ty-font-size-lg)));
  --ty-input-number-padding-inline-current: var(--ty-input-padding-inline-lg, var(--ty-control-padding-inline-lg, 16px));
}
.ty-input-number_disabled .ty-input-number__input {
  cursor: not-allowed;
  background-color: var(--ty-input-bg-disabled, var(--ty-color-bg-disabled));
  color: var(--ty-input-text-disabled, var(--ty-color-text-quaternary));
}
.ty-input-number_disabled .ty-input-number__input:hover {
  border-color: var(--ty-input-border);
}
.ty-input-number_disabled .ty-input-number__up, .ty-input-number_disabled .ty-input-number__down {
  cursor: not-allowed;
}
.ty-input-number_disabled .ty-input-number__up .ty-icon, .ty-input-number_disabled .ty-input-number__down .ty-icon {
  color: var(--ty-input-number-icon-color) !important;
}
.ty-input-number_disabled .ty-input-number__up:hover, .ty-input-number_disabled .ty-input-number__down:hover {
  flex: 1;
}
.ty-input-number_disabled .ty-input-number__up:active, .ty-input-number_disabled .ty-input-number__down:active {
  background-color: transparent;
}
.ty-input-number_always-controls .ty-input-number__controls {
  opacity: 1;
}