@import "../../styles/themes.scss";
@import "../../styles/typography.scss";
@import "../../styles/states.scss";

.input-component {
  position: relative;
  box-sizing: border-box;
  font-family: Roboto, sans-serif;
  width: 100%;

  & * {
    box-sizing: border-box;
  }
  .input-component__label--wrapper {
    width: 100%;
  }

  &.input-component--disabled {
    .input-component__input-wrapper {
      cursor: not-allowed;
      .input-component__input {
        user-select: none;
        border: none;
        pointer-events: none;
        @include theme-prop(background-color, disabled-background-color);
        cursor: not-allowed;
      }
      .input-component__icon--container.input-component__icon--container-has-icon {
        &:hover {
          background-color: transparent;
        }
      }
      .input-component__icon {
        cursor: not-allowed;
      }
    }
  }

  .input-component__input-wrapper {
    width: 100%;
    position: relative;
    &.input-component__input--error-validation {
      &:hover {
        .input-component__input {
          @include theme-prop(border-color, negative-color);
        }
      }
      .input-component__input {
        @include theme-prop(border-color, negative-color);
        &:focus,
        &:active {
          @include theme-prop(border-color, negative-color);
        }
      }
      .input-component__icon--container .input-component__icon {
        @include theme-prop(color, negative-color);
        &:hover {
          @include theme-prop(color, negative-color);
        }
      }
      + .input-component__sub-text-container {
        .input-component__sub-text-container-status {
          @include theme-prop(color, negative-color);
        }
      }
    }
    &.input-component__input--success-validation {
      &:hover {
        .input-component__input {
          @include theme-prop(border-color, positive-color);
        }
      }
      .input-component__input {
        @include theme-prop(border-color, positive-color);
        &:focus,
        &:active {
          @include theme-prop(border-color, positive-color);
        }
      }
      .input-component__icon--container .input-component__icon {
        @include theme-prop(color, positive-color);
        &:hover {
          @include theme-prop(color, positive-color);
        }
      }
      + .input-component__sub-text-container {
        .input-component__sub-text-container-status {
          @include theme-prop(color, positive-color);
        }
      }
    }
    &.input-component__input-wrapper--size-small {
      height: 32px;
      .input-component__input {
        @include font-input();
        &.input-component__input--has-icon {
          &.input-component__input--only-underline {
            padding-left: $spacing-xs;
          }
        }
      }
    }
    &.input-component__input-wrapper--size-medium {
      height: 40px;
      .input-component__input {
        @include font-paragraph();
        &.input-component__input--has-icon {
          padding: $spacing-small $spacing-xl $spacing-small $spacing-medium;
          &.input-component__input--only-underline {
            padding-left: 4px;
          }
        }
      }
      .input-component__icon--container {
        pointer-events: none;
        height: 32px;
        width: 32px;
        outline: none;
        .input-component__icon {
          font-size: $font-size-paragraph;
        }
      }
    }
    &.input-component__input-wrapper--size-large {
      height: 48px;
      .input-component__input {
        @include font-paragraph();
        &.input-component__input--has-icon {
          padding: $spacing-small $spacing-xl $spacing-small $spacing-medium;
          &.input-component__input--only-underline {
            padding-left: $spacing-xs;
          }
        }
      }
      .input-component__icon--container {
        height: 40px;
        width: 40px;
        .input-component__icon {
          font-size: $font-size-paragraph;
        }
      }
    }

    .input-component__icon--container {
      &:hover + .input-component__icon--container + .input-component__input {
        @include theme-prop(border-color, primary-text-color);
      }
    }

    &:hover {
      .input-component__input {
        @include theme-prop(border-color, primary-text-color);
      }
    }

    .input-component__input {
      width: 100%;
      height: 100%;
      outline: 0;
      background-color: transparent;
      border: 1px solid;
      @include theme-prop(border-color, ui-border-color);
      border-radius: $border-radius-small;
      transition: border-color 0.1s ease-in;
      padding: $spacing-small $spacing-medium;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      @include theme-prop(color, primary-text-color);
      &.input-component__input--hover {
        @include theme-prop(border-color, primary-text-color);
      }
      &:focus,
      &:active,
      &.input-component__input--active {
        @include theme-prop(border-color, primary-color);
      }

      &::placeholder {
        @include theme-prop(color, secondary-text-color);
        font-weight: 400;
      }

      &.input-component__input--has-icon {
        padding: $spacing-small $spacing-large $spacing-small $spacing-medium;
      }

      &.input-component__input--round {
        border-radius: 50px;
      }
      &.input-component__input--square {
        border-radius: 0;
      }
      &.input-component__input--only-underline {
        border-left: none;
        border-right: none;
        border-top: none;
        padding: $spacing-small $spacing-large $spacing-small $spacing-xs;
        border-radius: 0 !important;
      }
    }
    .input-component__icon--container {
      position: absolute;
      top: 50%;
      right: 4px;
      width: 24px;
      height: 24px;
      transform: translateY(-50%);
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: $border-radius-small;
      opacity: 0;
      pointer-events: none;
      &:active,
      &:focus,
      &:focus-visible {
        outline: none;
        @include theme-prop(background-color, primary-background-hover-color);
      }
      -webkit-appearance: none;

      &.input-component__icon--container-active {
        &.input-component__icon--container-has-icon {
          pointer-events: all;
          cursor: pointer;
        }
        opacity: 1;
        .input-component__icon {
          opacity: 1;
          pointer-events: all;
          transform: rotate(0) scale(1);
        }
      }
      &.input-component__icon--container-has-icon:hover,
      &.input-component__icon--container-has-icon:focus-within {
        @include theme-prop(background-color, primary-background-hover-color);
      }
      .input-component__icon {
        transform: rotate(90deg) scale(0.8);
        @include theme-prop(color, icon-color);
        will-change: transform;
        pointer-events: none;
        transition: color 0.1s $expand-animation-timing, transform 0.1s $expand-animation-timing;
        font-size: 14px;
      }
    }
  }
  .input-component__sub-text-container {
    display: flex;
    @include font-input();
    @include theme-prop(color, secondary-text-color);
    .input-component__sub-text-container-status {
    }
    .input-component__sub-text-container-counter {
      margin-left: auto;
    }
  }
}