.input-container {
  position: relative;
  width: 100%;

  label {
    display: flex;
    margin-bottom: 8px;


    .tooltip-container, .tooltip{
      display: flex;
    }
  }

  .input-display {
    width: 100%;
    padding: 0 16px;
    height: 40px;
    border: 1px solid $light-grey;
    border-radius: 6px;
    background: $white;
    @include display-flex(flex-start, center);
    transition: all ease-in-out 0.3s;

    input {
      width: 100%;
      border-radius: 6px;
      height: 100%;
      background: transparent;
      border: 0;
      padding: 0;
      font-family: $primary-font;
      color: $black;
      font-size: 14px;
      line-height: 24px;
      letter-spacing: -0.006px;
      appearance: none;
      outline: none;
      box-shadow: none;

      &::-webkit-outer-spin-button,
      &::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }

      &[type="number"] {
        -moz-appearance: textfield;
      }

      &[type="search"] {
        &::-ms-clear,
        &::-ms-reveal {
          display: none;
          width: 0;
          height: 0;
        }

        &::-webkit-search-decoration,
        &::-webkit-search-cancel-button,
        &::-webkit-search-results-button,
        &::-webkit-search-results-decoration {
          display: none;
        }
      }

      @include placeholder(40px) {
        color: $dark-grey;
        font-size: 14px;
        line-height: 24px;
        letter-spacing: -0.006px;
      }

      &:focus {
        outline: $light-grey;
      }

      &:disabled {
        color: $grey;
        -webkit-text-fill-color: $grey;
        opacity: 1;
        -webkit-opacity: 1;
      }
    }

    .input-addon {
      height: 100%;
      padding: 0 16px;
      @include display-flex(initial, center);
      cursor: pointer;

      svg,
      img {
        width: 16px;
      }

      & > span {
        @include display-flex(initial, flex-start);
        margin-right: 8px;

        &:last-child {
          margin-right: 0;
        }
      }

      &__icon {
        @include display-flex(initial, flex-start);
      }

      &__text {
        color: $primary;
      }

      &__left {
        &:first-child {
          padding-left: 0;
        }
      }

      &__right {
        border-left: 1px solid $light-grey;
        &:last-child {
          padding-right: 0;
        }
      }

      &__button {
        height: 32px;
        padding: 0 8px;
        border: 0;

        .button {
          min-width: auto;
        }
      }

      &.disabled {
        opacity: 0.5;
        // pointer-events: none;
      }
    }
  }

  &.input-addon-container {
    input {
      width: calc(100% - 30px);
    }

    &__multiple {
      input {
        width: calc(100% - 60px);
      }
    }

    &__button {
      .input-display {
        padding-right: 0;
      }
    }
  }

  &.phone-input-container,
  &.currency-input-container {
    .input-display {
      padding-left: 0;
    }

    .select-container {
      position: unset;
      height: 100%;
      width: auto;
      min-width: unset;

      .select-display {
        border: 0;
        border-right: 1px solid $light-grey;
        border-radius: 6px 0 0 6px;
        height: 100%;
        margin-right: 16px;
        padding-right: 16px;

        &__text {
          margin-right: 8px;
          @include full-circle(16px);
          @include display-flex(center, center);
          background-color: $light-grey;

          img {
            width: 100%;
            @include image-full-fit(cover, top);
          }
        }

        &__dropdown {
          padding-right: 0;

          svg,
          img {
            width: 12px;
          }
        }
      }
    }
  }

  &.currency-input-container {
    .select-container {
      .select-display {
        &__text {
          border-radius: 0;
          background-color: unset;
          width: auto;
          min-width: unset;
          flex: unset;
        }
      }
    }
  }

  &.search-input-container {
    position: relative;

    .input-display {
      transition: unset;
    }

    .input-addon {
      &__left {
        color: $light-blue;
      }

      &__right {
        border-left: 0;

        svg {
          path {
            fill: $dark-blue-6;
          }
        }
      }
    }

    &--developer {
      .input-display {
        background: $dark-blue-7;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-color: $dark-blue-7;

        input {
          color: $light-blue;
        }
      }
    }
  }

  .developer-search__info {
    position: absolute;
    bottom: -56px;
    left: 0;
    right: 0;
    background: $dark-blue-7;
    color: $light-blue;
    padding: 4px 16px 16px;
    border-radius: 0 0 6px 6px;
    opacity: 0;
    pointer-events: none;
    border: 1px solid $dark-blue-7;

    &--active {
      opacity: 1;
    }
  }

  .input-message {
    margin-top: 4px;
    position: absolute;

    &.error {
      color: $critical;
    }

    &.warning {
      color: $warning;
    }

    &.success {
      color: $success;
    }
  }

  &__focused {
    .input-display {
      border-color: $success;
      box-shadow: $input-shadow;
    }
  }

  &__error {
    .input-display {
      border-color: $critical;
      box-shadow: none;
    }
  }

  &__disabled {
    // pointer-events: none;
  }



  .input-label__tooltip {
    margin-left: 8px;
  }
}