.yc-text-input {
  box-sizing: border-box;
  display: inline-block;
  width: 100%;
  position: relative;
  /* increase css specificity to rewrite Button styles */
}
.yc-text-input__control {
  box-sizing: border-box;
  display: inline-block;
  vertical-align: top;
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  font-weight: normal;
  font-family: var(--yc-text-body-font-family);
  color: var(--yc-color-text-primary);
  background-color: transparent;
}
.yc-text-input__control::placeholder {
  color: var(--yc-color-text-hint);
}
.yc-text-input__control:focus {
  outline: none;
}
.yc-text-input__control_type_textarea {
  overflow-x: hidden;
}
.yc-text-input__control_type_textarea:not([resize]), .yc-text-input__control_type_textarea[resize=none] {
  resize: none;
}
.yc-text-input__control_type_textarea:not(.yc-text-input__control_autosize) {
  height: auto;
}
.yc-text-input__control[type=number] {
  appearance: textfield;
}
.yc-text-input__error {
  font-size: var(--yc-text-body-1-font-size);
  line-height: var(--yc-text-body-1-line-height);
  font-weight: var(--yc-text-body-font-weight);
  color: var(--yc-color-text-danger);
  margin-top: 2px;
}
.yc-text-input__clear[class] {
  --yc-button-background-color: transparent;
  --yc-button-background-color-hover: transparent;
  position: absolute;
  top: 0;
  right: 0;
  color: var(--yc-color-text-hint);
}
.yc-text-input__clear[class]:hover {
  color: var(--yc-color-text-primary);
}
.yc-text-input__clear[class]:not(.yc-text-input__clear_visible) {
  display: none;
}
.yc-text-input_size_s {
  --yc-text-input-border-radius: var(--yc-border-radius-s);
}
.yc-text-input_size_s .yc-text-input__control {
  height: 24px;
  padding: 4px 8px;
  font-size: 13px;
  line-height: 16px;
}
.yc-text-input_size_s.yc-text-input_has-clear .yc-text-input__control {
  padding-right: 26px;
}
.yc-text-input_size_m {
  --yc-text-input-border-radius: var(--yc-border-radius-m);
}
.yc-text-input_size_m .yc-text-input__control {
  height: 28px;
  padding: 5px 8px;
  font-size: 13px;
  line-height: 16px;
}
.yc-text-input_size_m.yc-text-input_has-clear .yc-text-input__control {
  padding-right: 26px;
}
.yc-text-input_size_l {
  --yc-text-input-border-radius: var(--yc-border-radius-l);
}
.yc-text-input_size_l .yc-text-input__control {
  height: 36px;
  padding: 10px 13px;
  font-size: 13px;
  line-height: 16px;
}
.yc-text-input_size_l.yc-text-input_has-clear .yc-text-input__control {
  padding-right: 36px;
}
.yc-text-input_size_xl {
  --yc-text-input-border-radius: var(--yc-border-radius-xl);
}
.yc-text-input_size_xl .yc-text-input__control {
  height: 44px;
  padding: 12px 13px;
  font-size: 15px;
  line-height: 20px;
}
.yc-text-input_size_xl.yc-text-input_has-clear .yc-text-input__control {
  padding-right: 36px;
}
.yc-text-input_view_normal .yc-text-input__control {
  border: 1px solid var(--yc-color-line-generic);
}
.yc-text-input_view_normal .yc-text-input__control:hover {
  border: 1px solid var(--yc-color-line-generic-hover);
}
.yc-text-input_view_normal .yc-text-input__control:focus {
  border: 1px solid var(--yc-color-line-generic-active);
}
.yc-text-input_view_clear .yc-text-input__control {
  border: 1px solid transparent;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}
.yc-text-input.yc-text-input_pin_round-round .yc-text-input__control {
  border-radius: var(--yc-text-input-border-radius);
}
.yc-text-input.yc-text-input_pin_brick-brick .yc-text-input__control {
  border-radius: 0;
}
.yc-text-input.yc-text-input_pin_clear-clear .yc-text-input__control {
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}
.yc-text-input.yc-text-input_pin_circle-circle .yc-text-input__control {
  border-radius: 100px;
}
.yc-text-input.yc-text-input_pin_round-brick .yc-text-input__control {
  border-radius: var(--yc-text-input-border-radius) 0 0 var(--yc-text-input-border-radius);
}
.yc-text-input.yc-text-input_pin_brick-round .yc-text-input__control {
  border-radius: 0 var(--yc-text-input-border-radius) var(--yc-text-input-border-radius) 0;
}
.yc-text-input.yc-text-input_pin_round-clear .yc-text-input__control {
  border-radius: var(--yc-text-input-border-radius) 0 0 var(--yc-text-input-border-radius);
  border-right: 0;
}
.yc-text-input.yc-text-input_pin_clear-round .yc-text-input__control {
  border-radius: 0 var(--yc-text-input-border-radius) var(--yc-text-input-border-radius) 0;
  border-left: 0;
}
.yc-text-input.yc-text-input_pin_brick-clear .yc-text-input__control {
  border-radius: 0;
  border-right: 0;
}
.yc-text-input.yc-text-input_pin_clear-brick .yc-text-input__control {
  border-radius: 0;
  border-left: 0;
}
.yc-text-input.yc-text-input_pin_circle-brick .yc-text-input__control {
  border-radius: 100px 0 0 100px;
}
.yc-text-input.yc-text-input_pin_brick-circle .yc-text-input__control {
  border-radius: 0 100px 100px 0;
}
.yc-text-input.yc-text-input_pin_circle-clear .yc-text-input__control {
  border-radius: 100px 0 0 100px;
  border-right: 0;
}
.yc-text-input.yc-text-input_pin_clear-circle .yc-text-input__control {
  border-radius: 0 100px 100px 0;
  border-left: 0;
}
.yc-text-input_disabled .yc-text-input__control {
  background-color: var(--yc-color-base-generic-accent-disabled);
  color: var(--yc-color-text-hint);
  border-color: transparent;
}
.yc-text-input_disabled .yc-text-input__control:hover {
  border-color: transparent;
}
.yc-text-input_has-scrollbar .yc-text-input__clear {
  right: var(--yc-scrollbar-width);
}
.yc-text-input_state_error.yc-text-input_view_normal .yc-text-input__control {
  border-color: var(--yc-color-line-danger);
}
.yc-text-input_state_error.yc-text-input_view_normal .yc-text-input__control:hover, .yc-text-input_state_error.yc-text-input_view_normal .yc-text-input__control:focus {
  border-color: var(--yc-color-line-danger);
}
.yc-text-input_state_error.yc-text-input_view_clear .yc-text-input__control {
  border-bottom: 1px solid var(--yc-color-line-danger);
}
.yc-text-input_state_error.yc-text-input_view_clear .yc-text-input__control:hover, .yc-text-input_state_error.yc-text-input_view_clear .yc-text-input__control:focus {
  border-bottom: 1px solid var(--yc-color-line-danger);
}