@import "../../colors.css";
@import "../../typography.css";
@import "../properties.css";

:root {
  --input-color: var(--color-birdperson-gray-500);
  --input-font-family: var(--title-font-family);
  --input-font-size: var(--form-item-font-size);
  --input-padding-bottom: var(--spacing-tiny);
  --input-padding-top: var(--spacing-small);

  --input-container-letter-spacing: var(--letter-spacing);
  --input-container-padding: 4px;
  --input-container-textarea-padding-top: 25px;

  --input-textarea-border-color: var(--color-squanchy-gray-50);
  --input-textarea-border-radius: 3px;
  --input-textarea-border-style: solid;
  --input-textarea-border-width: 0 0 2px 0;
  --input-textarea-caret-default-color: var(--color-birdperson-gray-500);
  --input-textarea-height: calc(100% - 25px);
  --input-textarea-label-top: 0;
  --input-textarea-placeholder-opacity: 0;

  --input-multiline-content-present-top: 0;
  --input-multiline-expander-min-height: 25px;
  --input-multiline-font-size: var(--input-font-size);
  --input-multiline-line-height: 20px;
  --input-multiline-padding-bottom: var(--spacing-tiny);
  --input-multiline-padding-left: 1px;
  --input-multiline-padding-right: 1px;

  --input-label-color: var(--form-item-label-color);
  --input-label-font-size-default: var(--input-font-size);
  --input-label-top: 20px;
  --input-label-transition-time: 0.1s;

  --input-icon-active-color: var(--color-birdperson-gray-500);
  --input-icon-inactive-color: var(--color-squanchy-gray-200);
  --input-icon-margin: var(--spacing-small);
  --input-icon-padding: 22px;

  --input-display-password-icon-bottom: var(--spacing-tiny);
  --input-display-password-icon-right: var(--spacing-tiny);

  --input-secondary-text-font-size: var(--form-item-font-size);
  --input-secondary-text-margin-top: var(--spacing-tiny);

  --input-textarea-hover-border-color: var(--color-squanchy-gray-200);

  --input-label-color-focus: var(--color-birdperson-gray-500);
  --input-label-font-size-focus: var(--form-item-font-size);
  --input-textarea-focus-border-color: var(--color-birdperson-gray-500);
  --input-textarea-focus-placeholder-color: var(--color-squanchy-gray-300);
  --input-textarea-focus-placeholder-opacity: 1;
  --input-textarea-focus-transition-time: 100ms;

  --input-color-error: var(--color-beth-pink-100);

  --input-color-disabled: var(--color-squanchy-gray-200);
  --input-textarea-disabled-background: var(--color-squanchy-gray-50);
  --input-textarea-disabled-border-color: var(--color-squanchy-gray-100);
}