@import 'main';

$input_transition: 550ms, cubic-bezier(0.19, 1, 0.22, 1);
$input_width: 288px;
$input_height: 32px;
$input_icon_size: 24px;
$input_message_font_size: 12px;

.input {
  width: $input_width;

  input {
    width: 100%;
    height: 100%;
    padding: 6px 12px;
    font-family: $default_font_family;
    font-size: $default_font_size;
    background-color: $color_paper;
    border: 1px solid $color_grey;
    color: $color_default;
    text-overflow: ellipsis;
    @include border-radius();
    @include placeholder() {
      color: $color_grey;
    }
    @include box-shadow($box_shadow_light);
    @include transition($input_transition...);

    &[disabled] {
      background-color: $color_light;
      color: $color_grey;
      border-color: transparent;
      box-shadow: none;
    }
    &[type=number]::-webkit-inner-spin-button,
    &[type=number]::-webkit-outer-spin-button {
      @include remove_appearance;
    }
    &::-ms-clear {
      display: none;
    }
  }
}

.box {
  width: 100%;
  height: $input_height;
}

.icon {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  color: $color_grey;
  @include middle();
  @include transition($input_transition...);
  i {
    font-size: $input_icon_size;
  }
  &.delete-icon, &.waiting-icon, &.password-icon {
    right: 8px;
  }
  &.delete-icon, &.password-icon, &.chevrons-icons {
    cursor: pointer;
  }
  &.delete-icon {
    visibility: hidden;
    opacity: 0;
  }
  &.waiting-icon {
    display: none;
    svg {
      width: $input_height;
      height: $input_height;
      fill: $color_grey;
    }
  }
  &.password-icon, &.left-icon {
    color: $color_grey;
  }
  &.left-icon {
    left: 8px;
  }
  &.chevrons-icons {
    right: 0;
    padding: 0 2px;
    border: 1px solid $color_grey;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    @include linear-gradient(bottom, $color_light_bright, $color_paper);
    @include transition();

    &:before {
      display: none;
    }

    .chevron-up-icon, .chevron-down-icon {
      height: 50%;
      display: block;
      margin: -2px 0;

      i {
        font-size: 20px;
        @include transition();
      }
    }

    &.focused {
      border-bottom-right-radius: 0 !important;
    }
  }
}

.message {
  font-size: $input_message_font_size;
  letter-spacing: 0.4px;
  line-height: 1.5;
  color: $color_dark;
}

.clearable:not(.waiting) input[type=text]:not([value=""]):not([disabled]) {
  padding-right: 36px;

  & ~ .delete-icon {
    visibility: visible;
    opacity: 1;
  }
}

.waiting {
  input {
    padding-right: 40px;
  }

  & &-icon {
    display: block !important;
  }
  .delete-icon, .password-icon, .chevrons-icons {
    display: none;
  }
}

.error {
  input {
    border-color: $color_error;
    color: $color_error;
  }
  .left-icon i {
    color: $color_error !important;
  }
  .message {
    display: block;
    color: $color_error;
  }
}

.with-icon {
  input {
    padding-left: 40px;
  }
}

.password {
  input {
    padding-right: 36px;
  }

  .delete-icon {
    display: none;
  }

  .password-icon {
    display: block;
  }

  &.visible-password {
    .password-icon i {
      color: $color_dark;
    }
  }
}

.full-width {
  min-width: auto !important;
  width: 100%;
}

.input {
  input {
    &:not([disabled]) {
      &:hover {
        border-color: $color_primary;

        &:not(:focus) ~ .chevrons-icons {
          border-top-color: $color_primary;
          border-right-color: $color_primary;
          border-bottom-color: $color_primary;
        }
      }

      & ~ .chevrons-icons {
        i:hover {
          color: $color_primary;
        }
      }
    }

    &[disabled] {
      & ~ .chevrons-icons {
        border-color: transparent;
        border-top-color: $color_paper;
        border-bottom-color: $color_light_bright;
      }
    }

    &:focus {
      @include box-shadow($box_shadow_paper_hover);
      border-color: transparent;

      & ~ .left-icon i {
        color: $color_dark;
      }

      & ~ .chevrons-icons {
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: $color_light_bright;
      }
    }
  }
}

.submitInput {
  input {
    padding-right: 68px !important;
  }
  .icon {
    &.delete-icon {
      right: 40px;
    }
    &.check-icon {
      right: 12px;
      cursor: pointer;
      i {
        background-color: $color_primary;
        border-radius: 50%;
        font-size: 20px;
        &:before {
          color: $color_paper;
        }
      }
    }
  }
}