@mixin disabled() {
  cursor: not-allowed;
	color: rgba($text-color, .4);
  background-color: $input-disabled-bg;
  border-color: transparent;
  pointer-events: none;
  resize: unset;
}

@mixin hover() {
  border-color: further($border-color-base, 7.2);
  background: further($input-bg, 5.2);
}

@mixin input() {
  @include reset-component();
  
  position: relative;
  display: inline-block;
  width: 100%;
  height: $input-height;
  padding: $input-padding;
  border: 2px $input-bc solid;
  border-radius: $border-radius-base;
  &:hover {
    @include hover();
  }
  &:active {
    @include hover();
  }
  // &:focus {
  //   border-color: $primary-color !important;
  //   background: $white !important;
  // }
  &-focus {
    border-color: $primary-color !important;
    // background: $white !important;
  }
  &-disabled {
    @include disabled();
  }
  &[disabled] {
    @include disabled();
  }
}

@mixin clear() {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 100%;
  // position: absolute;
  // top: 0;
  // right: 0;
  user-select: none;
  &:hover {
    color: $primary-color;
  }
  &:active {
    color: #fff;
    background: $primary-color;
  }
}

input, textarea {
  &::-webkit-input-placeholder {
    color: $input-placeholder-color;
    font-weight: lighter;
  }
}