@import "src/styles/partials/theme";
@import "src/styles/partials/utils";
@import "src/styles/partials/typography-mixins";

.input-success-icon{
  color: $success-300;
}

.input-error-icon{
  color: $error-200;
}

.white-icon{
  transition: all 0.2s ease-in-out;
  color: $gray-600;
}

.eye-icon{
  @extend .white-icon;
  cursor: pointer;
}

@mixin input-color($text-color, $border-color, $placeholder-color){
  transition: all 0.2s ease-in-out;

  &::placeholder {
    transition: all 0.2s ease-in-out;
    color: $placeholder-color;
  }

  &:-ms-input-placeholder {
    transition: all 0.2s ease-in-out;
    color: $placeholder-color;
  }

  &::-ms-input-placeholder {
    transition: all 0.2s ease-in-out;
    color: $placeholder-color;
  }

  background: $background-dark-0;
  border: 2px $border-color solid;
  color: $text-color;
}

.default-input-color{
  color: $gray-600;
  transition: all 0.2s ease-in-out;

  label{
    background: linear-gradient(180deg, rgba(30, 30, 30, 0) 49.48%, $background-dark-0 49.95%);
    color: inherit;
  }

  input{
    @include input-color($gray-600, $gray-200, $gray-200);
    &:focus {
      @include input-color($white, $white, $gray-50);
    }
  }

  &:hover {
    color: $white;

    input {
      transition: all 0.2s ease-in-out !important;
      border-color: $white;
      color: $white;
    }
    .white-icon, .eye-icon{
      color: $gray-600;
    }
  }
}

.disabled-input-color{
  @extend .default-input-color;
  opacity: 0.2;
  pointer-events: none;
}

.error-input-color{
  transition: all 0.2s ease-in-out !important;
  color: $error-200;
  label{
    background: linear-gradient(180deg, rgba(30, 30, 30, 0) 49.48%, $background-dark-0 49.95%);
  }
  input {
    transition: all 0.2s ease-in-out !important;
    @include input-color($gray-600, $error-200, $gray-200);
  }
  p{
    color: $error-200;
  }
  .white-icon, .eye-icon{
    color: $gray-600;
  }
}

.success-input-color{
  transition: all 0.2s ease-in-out !important;
  color: $success-300;

  label{
    background: linear-gradient(180deg, rgba(30, 30, 30, 0) 49.48%, $background-dark-0 49.95%);
    color: inherit;
  }
  input {
    transition: all 0.2s ease-in-out !important;
    @include input-color($gray-600, $success-300, $gray-50);
  }
  p{
    color: $success-300;
  }
  .white-icon, .eye-icon {
    color: $gray-600;
  }

}

@mixin input-style($class-name, $left-padding, $right-padding, $height, $border-size, $max-width){
  .#{$class-name}-input, .#{$class-name}-icon-input{
    min-width: 200px;
    width: 100%;
    transition: all 0.2s ease-in-out;
    position: relative;
    margin-top: 12px;
    input{
      transition: all 0.2s ease-in-out;
      width: 100%;
      padding: 0 $left-padding 0 $right-padding;
      border-width: $border-size;
      height: $height;
      border-radius: 8px;
    }
    label{
      color: inherit;
      padding: 1.5px 8px;
      isolation: isolate;
      width: fit-content;
      position: absolute;
      top: -12px;
      left: 8px;
      @include flex-center;
    }
    p{
      @include overline-text;
      margin-top: 2px;
      margin-left: 16px;
      margin-right: 8px;
      width: calc(100% - 24px);
      min-height: 22px;
    }
    .left-icon{
      position: absolute;
      top: calc(($height - 24px)/2);
      left: 12px;
    }
    .right-icon{
      position: absolute;
      top: calc(($height - 24px)/2);
      right: $right-padding;
    }
  }
  .#{$class-name}-icon-input{
    input{
      padding-right: calc($right-padding + 32px);
    }
  }
}

@include input-style(large-text, 24px, 24px, 54px, 2px, 480px);
@include input-style(medium-text, 20px, 16px, 52px, 2px, 308px);

@include input-style(large-password, 24px, 24px, 54px, 2px, 480px);
@include input-style(medium-password, 20px, 16px, 52px, 2px, 308px);

@include input-style(large-unlabeled, 16px, 16px, 44px, 2px, 480px);
@include input-style(medium-unlabeled, 16px, 16px, 36px, 1.5px, 308px);

@include input-style(large-search, 16px, 13px, 48px, 2px, 480px);
@include input-style(medium-search, 24px, 8px, 40px, 2px, 308px);

.large-search-input, .large-search-icon-input{
  margin-top: 0;
  input {
    padding-left: 45px;
  }
}

.medium-search-input, .medium-search-icon-input{
  margin-top: 0;
  input {
    padding-left: 40px;
  }
}

.medium-unlabeled-icon-input, .medium-unlabeled-input{
  margin-top: 0;
  border-width: 1.5px;
  input{
    &:focus, &:active, &:hover{
      border-width: 1.5px;
    }
  }
}

