.wrapper {
  position: relative;
  background: var(--fill4);
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
}

.root {
  position: relative;
  width: 100%;

  &__deletable {
    .input:disabled {
      opacity: 1;
      color: var(--text0);

      &+.placeholder {
        opacity: 1;
      }
    }

    &_hovered .input {
      background: var(--fill9);
    }
  }
}

.input {
  border-radius: 8px;
  padding: 9px 16px;
  background: var(--fill4);
  border: none;
  outline: none;
  height: 56px;
  font-size: var(--pMedium);
  font-weight: var(--pRegularWeight);
  box-sizing: border-box;
  transition: all 300ms;
  width: 100%;
  color: var(--text0);
  caret-color: var(--text0);

  &::placeholder {
    opacity: 0;
  }

  &:hover {
    background: var(--fill9);
  }

  &__withMask:focus::placeholder {
    opacity: 1;
    color: var(--text3);
    font-size: var(--pMedium);
    font-weight: var(--pRegularWeight);
  }
}

.placeholder {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--pSmall);
  font-weight: var(--pRegularWeight);
  color: var(--text3);
  transition: all 100ms;
  user-select: none;
}

.input:not(:placeholder-shown)+.placeholder {
  top: 9px;
  font-size: var(--caption);
  font-weight: var(--pRegularWeight);
  color: var(--text2);
  transform: translateY(0);
}

.input:not(:placeholder-shown) {
  padding: 27px 16px 9px;
  font-size: var(--pSmall);
}

.input:focus {
  padding: 27px 16px 9px;
  background: var(--fill9);

  &+.placeholder {
    top: 9px;
    font-size: var(--caption);
    font-weight: var(--pRegularWeight);
    color: var(--text2);
    transform: translateY(0);
  }
}

.input:disabled {
  user-select: none;
  touch-action: none;
  opacity: 0.4;

  &+.placeholder {
    opacity: 0.4;
    user-select: none;
    touch-action: none;
  }
}

.closeButton {
  opacity: 0;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  outline: none;
  width: 20px;
  height: 20px;
  background: none;
  padding: 0;
  cursor: text;
}

.deleteButton {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  outline: none;
  width: 20px;
  height: 20px;
  background: none;
  padding: 0;
  cursor: pointer;
}

.input:not(:placeholder-shown):focus~.closeButton {
  opacity: 1;
  pointer-events: all;
  cursor: pointer;
}

.errorContainer {
  background: var(--fill4);
  padding: 8px 16px;
}

.hintContainer {
  background: var(--fill4);
  padding: 8px 16px;
}

.eyeButton {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  outline: none;
  width: 20px;
  height: 20px;
  background: none;
  padding: 0;
  cursor: pointer;
}