.base-input {
  --bi-input-font-weight: 500;
  --bi-input-font-size: 14px;
  --bi-input-line-height: 1.43;
  --bi-input-color: #222222;
  --bi-background-color: #f5f6fe;
  --bi-radius: 4px;
  --bi-padding-horizontal: 16px;
  --bi-padding-top: 24px;
  --bi-padding-bottom: 12px;
  --bi-shadow-color: transparent;
  --bi-shadow-width: 0;
  --bi-outline-width: 4px;
  --bi-outline-color: transparent;
  --bi-label-font-weight: 500;
  --bi-label-font-size: 14px;
  --bi-label-line-height: 1.43;
  --bi-label-color: #222222;
  --bi-label-color-hover: #2f54eb;
  --bi-label-color-focus: #646464;
  --bi-label-color-not-empty: #646464;
  --bi-icon-size: 20px;
  --bi-icon-color: #fa8c16;
  --bi-message-font-size: 12px;
  --bi-message-line-height: 1.33;
  --bi-message-font-weight: 500;
  --bi-message-color: #646464;
  --bi-message-margin-left: var(--bi-padding-horizontal);
  --bi-message-margin-top: 4px;
  --bi-animationTime: .2s
}

@media not all and (hover:none) {
  .base-input:hover {
    --bi-shadow-color: #6d87f1;
    --bi-shadow-width: 1px;
    --bi-label-color: var(--bi-label-color-hover);
    --bi-label-color-focus: var(--bi-label-color-hover);
    --bi-label-color-not-empty: var(--bi-label-color-hover)
  }
}

.base-input:focus-within {
  --bi-shadow-color: #2f54eb;
  --bi-shadow-width: 1px;
  --bi-label-color: var(--bi-label-color-focus);
  --bi-outline-color: #c1ccf9
}

.base-input:not(:has(.base-input__label)) {
  --bi-padding-top: 18px;
  --bi-padding-bottom: 18px
}

.base-input[data-state=invalid] {
  --bi-shadow-color: #bb0000;
  --bi-label-color-hover: #bb0000;
  --bi-shadow-width: 1px;
  --bi-label-color-focus: #bb0000;
  --bi-message-color: #bb0000
}

.base-input[data-state=disabled] {
  --bi-shadow-color: transparent;
  --bi-label-color-hover: #646464;
  --bi-shadow-width: 1px;
  --bi-label-color-focus: #646464;
  --bi-input-color: #909090
}

.base-input[data-state=processing] {
  --bi-shadow-color: #00bb00;
  --bi-label-color-hover: #00bb00;
  --bi-shadow-width: 1px;
  --bi-label-color-focus: #00bb00
}

.base-input_small {
  --bi-padding-top: 8px;
  --bi-padding-bottom: 8px
}

.base-input_small .base-input__label {
  transform: translateY(-28px)
}

.base-input_small .base-input__input:focus+.base-input__label,
.base-input_small :not(.base-input__input:placeholder-shown)+.base-input__label {
  display: none
}

.base-input_secondary {
  --bi-background-color: #ffffff
}

.base-input__area {
  display: flex;
  align-items: center;
  padding-right: var(--bi-padding-horizontal);
  padding-left: var(--bi-padding-horizontal);
  transition: all var(--bi-animationTime);
  border-radius: var(--bi-radius);
  outline: var(--bi-outline-width) solid var(--bi-outline-color);
  background-color: var(--bi-background-color);
  box-shadow: 0 0 0 var(--bi-shadow-width) var(--bi-shadow-color) inset;
  white-space: nowrap;
  cursor: text;
  gap: 8px
}

[data-state=disabled] .base-input__area {
  cursor: not-allowed;
  pointer-events: none
}

.base-input__field {
  position: relative;
  flex-grow: 1
}

.base-input__input {
  width: 100%;
  padding: var(--bi-padding-top) 0 var(--bi-padding-bottom) 0;
  transition: all var(--bi-animationTime);
  border: 0;
  background-color: transparent;
  color: var(--bi-input-color);
  font-size: var(--bi-input-font-size);
  font-weight: var(--bi-input-font-weight);
  line-height: var(--bi-input-line-height)
}

.base-input__input:focus {
  outline: none
}

.base-input__label {
  display: flex;
  position: absolute;
  right: 0;
  left: 0;
  align-items: center;
  transform: translateY(-38px);
  transition: all var(--bi-animationTime);
  color: var(--bi-label-color);
  font-size: var(--bi-label-font-size);
  font-weight: var(--bi-label-font-weight);
  line-height: var(--bi-label-line-height);
  pointer-events: none
}

.base-input__input:focus+.base-input__label,
:not(.base-input__input:placeholder-shown)+.base-input__label {
  --bi-label-font-size: 11px;
  --bi-label-line-height: 1.24;
  transform: translateY(-46px)
}

:not(.base-input__input:placeholder-shown)+.base-input__label {
  --bi-label-color: var(--bi-label-color-not-empty)
}

.base-input__input#phoneNumber:focus+.base-input__label,
.base-input__input#phoneNumber:hover+.base-input__label {
  --bi-label-color-focus: var(--bi-label-color-hover);
  --bi-label-color: var(--bi-label-color-hover)
}

.base-input__extra-element {
  flex-shrink: 0;
  width: var(--bi-icon-size);
  height: var(--bi-icon-size);
  transition: all var(--bi-animationTime);
  color: var(--bi-icon-color)
}

.base-input__icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center
}

.base-input__message {
  display: flex;
  align-items: center;
  align-self: flex-start;
  margin-top: var(--bi-message-margin-top);
  margin-left: var(--bi-message-margin-left);
  color: var(--bi-message-color);
  font-size: var(--bi-message-font-size);
  font-weight: var(--bi-message-font-weight);
  line-height: var(--bi-message-line-height);
  gap: 8px
}

.base-input__message_hidden {
  display: none
}

.base-input__message-icon {
  flex-shrink: 0
}