.ty-input {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  color: var(--ty-input-color, var(--ty-color-text));
  height: var(--ty-input-height-current, var(--ty-input-height-md, var(--ty-height-md)));
  padding-inline: var(--ty-input-padding-inline-current, var(--ty-input-padding-inline-md, var(--ty-input-padding-inline-md, var(--ty-control-padding-inline-md))));
  gap: var(--ty-input-affix-gap, var(--ty-spacing-3));
  border: 1px solid var(--ty-input-border);
  border-radius: var(--ty-input-radius, var(--ty-border-radius));
  background-color: var(--ty-input-bg, var(--ty-color-bg-container));
  box-shadow: var(--ty-input-shadow, none);
  transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
}
.ty-input:hover {
  border-color: var(--ty-input-border-hover, var(--ty-color-primary));
}
.ty-input:focus-within {
  border-color: var(--ty-input-border-focus, var(--ty-color-primary));
  box-shadow: var(--ty-input-shadow-focus, var(--ty-shadow-focus));
}
.ty-input__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font-size: var(--ty-input-font-size-current, var(--ty-input-font-size-md, var(--ty-font-size-base)));
  line-height: var(--ty-input-line-height, var(--ty-line-height-base));
}
.ty-input__input::-moz-placeholder {
  color: var(--ty-input-placeholder, var(--ty-color-text-placeholder));
}
.ty-input__input::placeholder {
  color: var(--ty-input-placeholder, var(--ty-color-text-placeholder));
}
.ty-input__prefix, .ty-input__suffix {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: inherit;
}
.ty-input__clear-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ty-input-clear-color, var(--ty-color-text-quaternary));
  width: var(--ty-input-clear-size-current, var(--ty-input-clear-size, 1em));
  height: var(--ty-input-clear-size-current, var(--ty-input-clear-size, 1em));
  cursor: pointer;
  flex-shrink: 0;
}
.ty-input_sm {
  --ty-input-height-current: var(--ty-input-height-sm, var(--ty-height-sm));
  --ty-input-font-size-current: var(--ty-input-font-size-sm, var(--ty-font-size-sm));
  --ty-input-padding-inline-current: var(--ty-input-padding-inline-sm, var(--ty-input-padding-inline-sm, var(--ty-control-padding-inline-sm)));
  --ty-input-clear-size-current: var(--ty-input-clear-size-sm, var(--ty-input-clear-size, 14px));
}
.ty-input_md {
  --ty-input-height-current: var(--ty-input-height-md, var(--ty-height-md));
  --ty-input-font-size-current: var(--ty-input-font-size-md, var(--ty-font-size-base));
  --ty-input-padding-inline-current: var(--ty-input-padding-inline-md, var(--ty-input-padding-inline-md, var(--ty-control-padding-inline-md)));
  --ty-input-clear-size-current: var(--ty-input-clear-size-md, var(--ty-input-clear-size, 16px));
}
.ty-input_lg {
  --ty-input-height-current: var(--ty-input-height-lg, var(--ty-height-lg));
  --ty-input-font-size-current: var(--ty-input-font-size-lg, var(--ty-font-size-lg));
  --ty-input-padding-inline-current: var(--ty-input-padding-inline-lg, var(--ty-input-padding-inline-lg, var(--ty-control-padding-inline-lg)));
  --ty-input-clear-size-current: var(--ty-input-clear-size-lg, var(--ty-input-clear-size, 18px));
}
.ty-input_disabled {
  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_disabled:hover {
  border-color: var(--ty-input-border);
}
.ty-input_disabled:focus-within {
  box-shadow: none;
}
.ty-input_disabled .ty-input__input {
  cursor: not-allowed;
}
.ty-input_disabled .ty-input__clear-btn {
  cursor: not-allowed;
}

.ty-input-group {
  width: 100%;
  display: flex;
  box-sizing: border-box;
  position: relative;
  align-items: stretch;
}
.ty-input-group > .ty-input-group-addon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ty-input-group > * {
  position: relative;
  min-width: 0;
  flex-shrink: 0;
}
.ty-input-group > *:not(:first-child) {
  margin-left: calc(-1 * var(--ty-control-group-border-width, 1px));
}
.ty-input-group > *:hover {
  z-index: var(--ty-control-group-focus-z-index, 1);
}
.ty-input-group > .ty-input, .ty-input-group > .ty-input-number {
  flex: 1;
}
.ty-input-group_sm {
  height: var(--ty-input-height-sm, var(--ty-height-sm));
}
.ty-input-group_md {
  height: var(--ty-input-height-md, var(--ty-height-md));
}
.ty-input-group_lg {
  height: var(--ty-input-height-lg, var(--ty-height-lg));
}
.ty-input-group .ty-input {
  z-index: 1;
  flex: 1;
}
.ty-input-group .ty-input:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.ty-input-group .ty-input:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.ty-input-group .ty-input:not(:first-child, :last-child) {
  border-radius: 0;
}
.ty-input-group > .ty-btn, .ty-input-group > .ty-input-group-addon.ty-input-group-addon_control > .ty-btn, .ty-input-group > .ty-input-group-addon.ty-input-group-addon_control > .ty-select, .ty-input-group > .ty-input-group-addon.ty-input-group-addon_control > .ty-input, .ty-input-group > .ty-input-group-addon.ty-input-group-addon_control > .ty-input-number {
  height: 100%;
}
.ty-input-group > :not(:first-child) .ty-btn,
.ty-input-group > :not(:first-child) .ty-input,
.ty-input-group > :not(:first-child) .ty-input-number__input {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.ty-input-group > :not(:last-child) .ty-btn,
.ty-input-group > :not(:last-child) .ty-input,
.ty-input-group > :not(:last-child) .ty-input-number__input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.ty-input-group > :first-child .ty-btn,
.ty-input-group > :first-child .ty-input,
.ty-input-group > :first-child .ty-input-number__input {
  border-top-left-radius: var(--ty-control-group-radius, var(--ty-control-radius, var(--ty-border-radius)));
  border-bottom-left-radius: var(--ty-control-group-radius, var(--ty-control-radius, var(--ty-border-radius)));
}
.ty-input-group > :last-child .ty-btn,
.ty-input-group > :last-child .ty-input,
.ty-input-group > :last-child .ty-input-number__input {
  border-top-right-radius: var(--ty-control-group-radius, var(--ty-control-radius, var(--ty-border-radius)));
  border-bottom-right-radius: var(--ty-control-group-radius, var(--ty-control-radius, var(--ty-border-radius)));
}

.ty-input-group-addon {
  background-color: var(--ty-input-addon-bg, var(--ty-color-fill));
  border: 1px solid var(--ty-input-border);
  box-sizing: border-box;
  text-align: center;
  line-height: 1;
  border-radius: var(--ty-input-radius, var(--ty-border-radius));
  color: var(--ty-input-color, var(--ty-color-text));
  padding: var(--ty-input-addon-padding, var(--ty-spacing-3));
}
.ty-input-group-addon_sm {
  font-size: var(--ty-input-font-size-sm, var(--ty-font-size-sm));
}
.ty-input-group-addon_md {
  font-size: var(--ty-input-font-size-md, var(--ty-font-size-base));
}
.ty-input-group-addon_lg {
  font-size: var(--ty-input-font-size-lg, var(--ty-font-size-lg));
}
.ty-input-group-addon:first-child {
  border-right: 0;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
.ty-input-group-addon:last-child {
  border-left: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}
.ty-input-group-addon:not(:first-child, :last-child) {
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  padding: var(--ty-input-addon-padding, var(--ty-spacing-3));
}
.ty-input-group-addon_no-border {
  border: none;
  padding: 0;
}
.ty-input-group-addon_control {
  padding: 0;
  background-color: transparent;
}
.ty-input-group-addon_control > .ty-btn, .ty-input-group-addon_control > .ty-select, .ty-input-group-addon_control > .ty-input, .ty-input-group-addon_control > .ty-input-number {
  height: 100%;
  border-radius: 0;
}