@import "../../../assets/scss/main";
@import "../assets/dropdown";

$inputShadow: inset 0px 1px 4px rgba(162, 165, 176, 0.2);
$textColor: $gray1000;

$inputPadding: 10px 12px;
$inputMaxHeight: 40px;

$inputLargePadding: 20px 18px;
$inputLargeMaxHeight: 58px;

$inputSmallPadding: 8px 12px;
$inputSmallMaxHeight: 32px;

@mixin classicInput {
  max-height: $inputMaxHeight;
  padding: $inputPadding;
  @include headline;
}

@mixin smallInput {
  max-height: $inputSmallMaxHeight;
  padding: $inputSmallPadding;
  @include text;
}

@mixin largeInput {
  max-height: $inputLargeMaxHeight;
  padding: $inputLargePadding;
  @include headline;
}

@mixin inputBoxMixin {
  box-shadow: $inputShadow;
  border: 1px solid $borderColor;
  border-radius: $borderRadius;
  display: flex;
  align-items: center;
  background: $white;
}

@mixin inputMixin {
  border: none;
  background: transparent;
  border-radius: $borderRadius;
  width: 100%;
  height: 100%;
  display: flex;
  &::-webkit-input-placeholder {
    color: $placeholderColor;
  }

  &:-ms-input-placeholder {
    color: $placeholderColor;
  }

  &::placeholder {
    color: $placeholderColor;
  }
  color: $textColor;
}

.input {
  &__upperElements {
    display: flex;
    justify-content: space-between;
  }

  &__content {
    position: relative;
    max-width: 100%;
    width: 100%;
    @include inputBoxMixin;
    @include classicInput;

    input {
      @include inputMixin;
    }
  }

  &__wrapper {
    &.large {
      &::v-deep {
        .input {
          &__content {
            @include largeInput;

            input {
              padding-left: 16px;
            }
          }

          &__error, &__hint {
            margin-top: 12px;
          }
        }
      }

      &.input__wrapper__withPrepend {
        &::v-deep {
          .input {
            &__inner {
              position: static;

              &:before {
                content: '';
                position: absolute;
                top: 0;
                bottom: 0;
                height: 100%;
                background-color: $borderColor;
                width: 1px;
              }
            }

            &__prepend {
              margin-right: 18px;
            }
          }
        }
      }
    }

    &.small {
      &::v-deep {
        .input {
          &__content {
            @include smallInput;
          }
        }

        &.input__wrapper__withPrepend {
          .input {
            &__content {
              padding: 8px;
            }
          }
        }
      }
    }

    &__withError {
      &::v-deep {
        .input {
          &__content {
            border-color: $warning;
          }

          &__inner {
            &:before {
              background-color: $warning !important;
            }
          }
        }
      }
    }

    &__disabled {
      pointer-events: none;

      &::v-deep {
        .input {
          &__content {
            border-color: $gray30 !important;

            input {
              background: inherit;
              color: $gray40;

              &::-webkit-input-placeholder {
                color: $gray40;
              }

              &:-ms-input-placeholder {
                color: $gray40;
              }

              &::placeholder {
                color: $gray40;
              }
            }
          }

          &__password {
            svg {
              * {
                &[stroke] {
                  stroke: $gray40 !important;
                }

                &[fill] {
                  fill: $gray40 !important;
                }
              }
            }
          }

          &__inner {
            &:before {
              background-color: $gray40;
            }
          }
        }
      }

      &.input__wrapper__withPrepend {
        .input {
          &__prepend {
            color: $gray40;

            &::v-deep {
              svg {
                * {
                  &[stroke] {
                    stroke: $gray40 !important;
                  }

                  &[fill] {
                    fill: $gray40 !important;
                  }
                }
              }
            }
          }
        }
      }
    }

    &__focused {
      &:not(.input__wrapper__withError) {
        &::v-deep {
          .input {
            &__content {
              border-color: var(--input-color);
            }

            &__inner {
              &:before {
                background-color: var(--input-color) !important;
              }
            }
          }
        }
      }
    }

    &__hovered {
      &:not(.input__wrapper__focused) {
        &:not(.input__wrapper__withError) {
          &::v-deep {
            .input {
              &__content {
                border-color: $gray70;
              }

              &__inner {
                &:before {
                  background-color: $gray70;
                }
              }
            }
          }
        }
      }
    }

    &::v-deep {
      .v-select {
        display: flex;
        width: 100%;
        position: relative;
        padding-right: 6px;

        input {
          appearance: none;
          border: none;
          box-shadow: none;
          margin: 0;
          padding: 0;
          width: 100%;
        }

        .vs {
          &__clear {
            display: none;
          }

          &__dropdown-menu {
            @include dropdown;
          }

          &__dropdown-option {
            display: flex;
            @include classicInput;
            color: $gray100;
            padding-right: 10px;

            &--highlight {
              background-color: $gray10;
              color: $gray300;
            }

            &--selected {
              color: $gray1000;
            }
          }

          &__no-options {
            text-align: center;
          }

          &__selected {
            @include headline;
            height: 100%;
            display: flex;
            align-items: center;

            &-options {
              position: relative;
              width: 100%;
              display: flex;
              align-items: center;

              input {
                @include headline;
                margin-left: 2px;
              }
            }
          }

          &__dropdown-toggle {
            display: flex;
            width: 100%;
            align-items: center;
          }
        }

        &.vs {
          &--open {
            .input__toggle {
              transition: 0.3s;
              transform: rotateX(180deg);
            }
          }

          &--disabled {
            border-color: $gray30 !important;
            color: $gray40;

            input {
              background: inherit;
              color: $gray40;

              &::-webkit-input-placeholder {
                color: $gray40;
              }

              &:-ms-input-placeholder {
                color: $gray40;
              }

              &::placeholder {
                color: $gray40;
              }
            }
          }
        }

        .input__toggle {
          transition: 0.3s;
          transform: rotateX(0deg);
        }

      }

      &.small {
        .input {
          &__content {
            padding-right: 6px;
          }
        }

        .vs {
          &__dropdown-option {
            @include smallInput;
          }
        }

        .input {
          &__noResult {
            @include smallInput;
          }
        }
      }
    }

    &__withPrepend {
      .input {
        &__content {
          input {
            padding-left: 6px;
          }
        }

        &__prepend {
          display: flex;
          color: $gray60;
        }
      }
    }
  }

  &__option {
    display: flex;
    width: 100%;
    align-items: center;

    &__text {
      display: flex;
      width: 100%;
    }

    &__icon {
      display: flex;
    }
  }

  &__noResult {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    @include headline;
    @include classicInput;
    padding: $inputSmallPadding;
    color: $gray60;
  }

  &__password {
    cursor: pointer;
  }

  &__inner {
    display: flex;
    align-items: center;
    width: 100%;
  }
}