@use '../utils';
@use '../colors';

.reset {
  border: 0;
  box-sizing: border-box;
  font: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
}

.root {
  position: relative;
  background-color: transparent;
  width: 0;
  flex-grow: 1;
  display: flex;
  overflow: hidden;
  background: var(--base-input-background);
}

.field {
  width: 0;
  flex-grow: 1;
  display: block;
  background: var(--base-input-background, inherit);
  color: var(--base-input-color, inherit);
  font-size: inherit;
  line-height: inherit;
  z-index: 0;
  text-overflow: inherit;
  &::placeholder {
    color: var(--base-input-placeholder-color);
    -webkit-text-fill-color: var(--base-input-placeholder-color);
    opacity: 1;
  }
  &:disabled {
    background: var(--base-input-background);
    color: var(--base-input-color);
  }
  &:disabled::placeholder {
    color: var(--base-input-placeholder-color);
    -webkit-text-fill-color: var(--base-input-placeholder-color);
    opacity: 1;
  }
  &::-ms-clear {
    // отключаем системный крестик в IE
    display: none;
    height: 0;
    width: 0;
  }
  &.multiline {
    resize: none;
    @include utils.hidden-scrollbars;
  }
}

.rest-placeholder {
  pointer-events: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: inherit;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  overflow: hidden;
  z-index: 1;
  .shift-part {
    color: transparent;
  }
  .main-part {
    color: var(--base-input-placeholder-color);
  }
}