@use "../styles";

.host {
  .input {
    border: none;
    appearance: none;
    background-color: none;

    font-size: 1em;
    flex: 1 1 0;
    overflow: hidden;
    text-align: left;
    padding: 0 12px;
  }

  &.filled {
    .input {
      border: none;
      margin: 0;
    }
  }
}

.passwordToggle {
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  flex: 0 0 auto;
  padding: 8px;
  position: absolute;
  right: 12px;
  top: 50%;
  translate: 0 -50%;
  background-color: transparent;
  box-shadow: none;

  icon {
    width: 20px;
    height: 20px;
    line-height: 20px;
  }
}