@use '../../../_styles/mixin.scss' as *;
@use './var.scss';
.o-i-input {
  display: flex;
  width: 100%;
}
.o-ii-input {
  outline: none;
  border: none;
  color: inherit;
  cursor: inherit;
  background-color: transparent;
  display: inline-flex;
  padding: 0;
  line-height: inherit;
  height: 100%;
  width: 100%;
  font-size: inherit;
  min-width: 20px;

  &::-webkit-input-placeholder {
    color: var(--ii-placeholder-color);
  }
}

.o-ii-suffix {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  position: relative;
  margin-left: 4px;
}
.o-ii-prefix {
  display: flex;
  align-items: center;
  margin-right: 4px;
}

.o-ii-suffix-icon {
  display: flex;
  transition: all var(--o-duration-m1) var(--o-easing-standard-out);
}

.o-ii-clear {
  visibility: hidden;
  flex-shrink: 0;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--icon-color);
  font-size: var(--icon-size);
  @include x-svg-hover;

  @include hoverable {
    &:hover {
      color: var(--icon-color-hover);
    }

    .o-ii-suffix-icon + & {
      position: absolute;
    }
  }
}
.o-ii-clearable {
  @include hover {
    .o-ii-suffix-icon {
      visibility: hidden;
      opacity: 0;
      transition: none;
    }
    .o-ii-clear {
      visibility: visible;
      opacity: 1;
      transition: all var(--o-duration-m1) var(--o-easing-standard-in);
    }
  }
  @include hoverable(none) {
    .o-ii-suffix-icon,
    .o-ii-clear {
      visibility: visible;
      opacity: 1;
    }
  }
}
.o-ii-eye {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: var(--icon-size);
  color: var(--icon-color);
  margin-left: 4px;

  @include hover {
    color: var(--icon-color-hover);
  }

  :first-child {
    margin-left: 0;
  }
  .o-ii-disabled &,
  .o-ii-readonly & {
    color: var(--icon-color-disabled);
  }
}

.o-ii-password {
  font-family: Arial, 'Helvetica Neue', Helvetica, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}