@import "../settings/variables";
@import "../tools/forms";

.input {
  font-size: $input-font-size;
  height: $input-height;
  line-height: $input-font-size;

  &[type="number"] {
    -moz-appearance: textfield;

    &::-webkit-inner-spin-button,
    &::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
  }
}

.input,
.textarea {
  background-color: $input-background-color;
  border-radius: $input-textarea-border-radius;
  border: $input-textarea-border-settings;
  color: $input-text-color;
  display: block;
  font-family: inherit;
  letter-spacing: $input-textarea-letter-spacing;
  padding: $input-textarea-padding;
  width: 100%;

  @include placeholder($input-placeholder-color);

  &::-ms-clear {
    display: none;
  }

  &--focused,
  &:focus {
    background-color: $input-focus-background-color;
    border-color: $input-focus-border-color;
    box-shadow: $input-focus-box-shadow;
    color: $input-focus-color;
    outline: none;
  }

  &--disabled,
  &:disabled {
    @include placeholder($input-disabled-text-color);
    color: $input-disabled-text-color;
    border: 1px solid $input-disabled-border-color;
  }

  &--error {
    border: $input-textarea-border-settings-error;
    border-color: $input-error-border-color;
    background-color: $input-error-background-color;
    border-color: var(
      --core-input-error-border-color,
      $input-error-border-color
    );
    background-color: var(
      --core-input-error-background-color,
      $input-error-background-color
    );
  }
}

.textarea {
  font-size: $input-font-size;
  line-height: $input-textarea-line-height;
  min-height: $input-textarea-height;

  &--resize-both {
    resize: both;
  }
  &--resize-none {
    resize: none;
  }
  &--resize-vertical {
    resize: vertical;
  }
  &--resize-horizontal {
    resize: horizontal;
  }
}

.icon-layout {
  position: relative;
  width: 100%;

  & input,
  &--count-1 input {
    padding-right: 32px + $icon-layout-icons-margin-right;
  }

  &--count-2 input {
    padding-right: 2 * 32px + $icon-layout-icons-margin-right;
  }

  &--count-3 input {
    padding-right: 3 * 32px + $icon-layout-icons-margin-right;
  }

  &__icons {
    right: 0;
    position: absolute;
    top: 0;
    height: 100%;
    margin-right: $icon-layout-icons-margin-right;

    > div {
      display: flex;
    }
  }
}

.input-icons {
  color: $icon-layout-icon-color;

  &--disabled {
    pointer-events: none;
    color: $icon-layout-icon-color-disabled;
  }
}