@import "./vars.pcss";

.formInput {
  width: var(--formInputWidth);
  background-color: var(--formInputBg);
  color: var(--formInputFontColor);
  border: var(--formInputBorder);
  height: var(--formInputHeight);
  padding: var(--formInputPadding);
  font-size: var(--formInputFontSize);
  line-height: var(--formInputLineHeight);
  cursor: var(--formInputCursor);
  font-weight: var(--formInputFontWeight);
  border-radius: var(--formInputBorderRadius);
  @mixin transition var(--formInputTransition);

  textarea& {
    --formInputHeight: var(--formInputTextareaHeight);
    padding-top: var(--formInputTextareaVPadding);
    padding-bottom: var(--formInputTextareaVPadding);
  }

  &::placeholder {
    color: var(--formInputPlaceholderColor);
    opacity: var(--formInputPlaceholderOpacity);
    @mixin textOverflow;
  }

  .isHover > &,
  &.isHover,
  &--isHover,
  &:hover {
    @media (hover: hover) {
      border-color: var(--formInputHoverBorderColor);
      color: var(--formInputHoverColor);
    }
  }

  .isFocus > &,
  &.isFocus,
  &--isFocus,
  &:focus:not(button) {
    border-color: var(--formInputFocusBorderColor);
    color: var(--formInputFocusColor);
  }

  .isInvalid > &,
  &.isInvalid,
  &--isInvalid {
    border-color: var(--formInputInvalidBorderColor);
    color: var(--formInputInvalidColor);
  }

  .isDisabled > &,
  &.isDisabled,
  &--isDisabled,
  &[disabled] {
    cursor: var(--formInputDisabledCursor);
    background-color: var(--formInputDisalbedBg);
    border-color: var(--formInputDisabledBorderColor);
    color: var(--formInputDisabledColor);
  }

  .isReadOnly > &,
  &.isReadOnly,
  &--isReadOnly,
  &[readonly] {
    cursor: var(--formInputDisabledCursor);
    background-color: var(--formInputDisalbedBg);
    border-color: var(--formInputDisabledBorderColor);
    color: var(--formInputDisabledColor);
  }

  &.isHidden,
  &--isHidden {
    @mixin visuallyHidden;
  }
}