:root {
  --input-border-color: #D4D4D4;
  --input-background-color: #16161608;
}

.input__control {
  min-height: 40px;
  display: grid;
  grid-template-areas: "root";
}

.input__control:focus-within:not(.input__control--error) {
  --input-border-color: #2060A5;
  --input-background-color: #fff;
}

.input__control--error {
  --input-border-color: #FF4D50;
  --input-background-color: #FFEBEF;
}

.input__overlay {
  display: flex;
  grid-area: root;
  gap: 4px;
  border-radius: 8px;
  border: 1px solid var(--input-border-color);
  background-color: var(--input-background-color);
  height: 40px;
  padding: 0 16px;
}

.input__text {
  display: grid;
  grid-template-areas: "root";
  flex-grow: 1;
}

.input__before {
  display: flex;
  grid-area: root;
  margin-left: -8px;
}

.input__value,
.input__placeholder,
.input__mask {
  grid-area: root;
  padding: 8px 0;
  border: none;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}

.input__mask {
  display: flex;
  pointer-events: none;
  align-items: center;
}

.input__mask > * {
  height: 22px;
  white-space: pre;
}

.input__mask-type-text,
.input__mask-type-placeholder {
  color: #8F8F8F;
}

.input__mask-type-hidden {
  color: transparent;
}

.input__value {
  background-color: transparent;
  border-radius: 6px;
}

.input__value:focus-visible {
  outline: none;
}

.input__placeholder {
  color: #8F8F8F;
  pointer-events: none;
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.input__actions,
.input__loading {
  grid-area: root;
  margin: auto 16px auto auto;
  height: 24px;
  user-select: none;
}

.input__find {
  grid-area: root;
  margin: auto 10px auto auto;
  height: 27px;
}

.input__error-item {
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  color: #F72D34;
}

.input__options {
  max-height: 230px;
  overflow-y: auto;
}

.input__options::-webkit-scrollbar-track {
  background-color: transparent;
}

.input__options::-webkit-scrollbar {
  width: 6px;
  background-color: transparent;
}

.input__options::-webkit-scrollbar-thumb {
  width: 4px;
  background-color: #AFAFAF;
  border-radius: 2px;
}

.input__option {
  cursor: pointer;
  padding: 4px 12px;
  border-radius: 4px;
  user-select: none;
}

.input__option:empty:before {
  content: ' ';
}

.input__options > .input__option--selected,
.input__option:hover {
  background-color: #EEF3F8;
}