@import '../../global';
@import '../../mixins/actionable';
@import '../../mixins/typography';

.input {
  width: auto;

  display: inline-block;

  &__block {
    width: 100%;
  }

  &__wrapper {
    display: flex;
    justify-content: flex-start;

    @include actionable;

    width: 100%;

    &:hover,
    &:focus-within {
      @include focus;
    }
  }

  &__container {
    @include action;

    margin: 0px;
    padding: 0px;

    outline: none;

    border: none;

    width: 100%;

    background-color: transparent;

    &::placeholder {
      color: color('gray');
    }
  }

  &__icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    margin-right: $push-sm;
  }

  &__eye {
    cursor: pointer;

    margin-left: $push-sm;

    outline: none;

    display: inline-flex;
    justify-content: center;
    align-items: center;
  }

  &__message {
    @include body;

    &__success {
      color: color('success');
    }

    &__danger {
      color: color('danger');
    }
  }
}