@import '../../assets/scss/utils/mixins';
@import '../../assets/scss/components/input/variables';

.st-input {
  $root: &;

  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: $st-input-height;
  padding-right: $st-input-padding-right;
  padding-left: $st-input-padding-left;
  color: $st-input-color;
  background: $st-input-background;
  border: $st-input-border;
  border-radius: $st-input-border-radius;
  transition: $st-input-border-transition;

  @include webkit-scrollbar;

  &__clear {
    box-sizing: content-box;
    width: $st-input-clear-icon-width;
    height: $st-input-clear-icon-height;
    padding: $st-input-clear-icon-padding;
    margin-right: -$st-input-clear-icon-padding;
    color: $st-color-pastel-gray;
    cursor: pointer;

    &:hover {
      color: $st-input-icon-focused-color;
    }
  }

  &__loader {
    box-sizing: content-box;
    padding: $st-input-loader-icon-padding;
    margin-right: -$st-input-loader-icon-offset;
    color: $st-input-icon-color;
  }

  &__inner {
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 0;
    font-size: $st-input-font-size;
    line-height: $st-input-line-height;
    color: $st-input-color;
    cursor: inherit;
    -webkit-appearance: none;
    border: none;
    outline: none;

    /* Disable default clear on IE */
    &::-ms-clear {
      display: none;
      width: 0;
      height: 0;
    }

    &::placeholder {
      color: $st-input-placeholder-color;
    }

    /* Firefox default outline */
    &:invalid {
      box-shadow: none;
    }
  }

  &__suffix,
  &__prefix {
    display: flex;
    align-items: center;
    color: $st-input-icon-color;
  }

  &__prefix {
    margin-right: $st-input-prefix-margin;
  }

  &__suffix-icon,
  &__prefix-icon {
    width: $st-input-icon-width;
    height: $st-input-icon-height;
  }

  &__icon {
    color: currentColor;
    text-align: center;
    transition: $st-input-icon-transition;

    + #{$root}__icon {
      margin-left: $st-input-icon-margin-between;
    }
  }

  &--disabled {
    cursor: not-allowed;
    background-color: $st-input-disabled-background;
    border-color: $st-input-disabled-border;

    #{$root}__inner {
      color: $st-input-disabled-color;
      background-color: $st-input-disabled-background;

      &::placeholder {
        color: $st-input-disabled-placeholder-color;
      }
    }

    #{$root}__icon {
      cursor: not-allowed;
    }
  }

  &:not(&--close-visible) {
    #{$root}__suffix {
      margin-left: $st-input-suffix-margin;
    }
  }

  &--hovered:not(&--focused) {
    #{$root}__prefix,
    #{$root}__suffix {
      color: $st-input-icon-hovered-color;
    }
  }

  &--focused {
    #{$root}__prefix,
    #{$root}__suffix {
      color: $st-input-icon-focused-color;
    }

    #{$root}__clear {
      color: $st-input-icon-hovered-color;

      &:hover {
        color: $st-input-icon-focused-color;
      }
    }
  }

  // --- Different sizes
  &--extra-large {
    height: $st-input-extra-large-height;
    font-size: $st-input-extra-large-font-size;

    #{$root}__prefix-icon,
    #{$root}__suffix-icon {
      width: $st-input-extra-large-icon-size;
      height: $st-input-extra-large-icon-size;
      font-size: $st-input-extra-large-icon-size;
    }
  }

  &--large {
    height: $st-input-large-height;
    font-size: $st-input-large-font-size;

    #{$root}__prefix-icon,
    #{$root}__suffix-icon {
      width: $st-input-large-icon-size;
      height: $st-input-large-icon-size;
      font-size: $st-input-large-icon-size;
    }
  }

  &--medium {
    height: $st-input-medium-height;
    font-size: $st-input-medium-font-size;
  }

  &--small {
    height: $st-input-small-height;
    font-size: $st-input-small-font-size;
  }

  &--mini {
    height: $st-input-mini-height;
    font-size: $st-input-mini-font-size;
  }

  &--with-error {
    border-color: $st-color-danger;
  }
}