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

:root {
  --date-input-background-color: var(--color-white);
  --date-input-border-radius: 3px;
  --date-input-border: 1px solid var(--color-squanchy-gray-20);
  --date-input-color: var(--date-input-input-color);
  --date-input-date-selector-left: -1px;
  --date-input-date-selector-top: 3px;
  --date-input-font-family: var(--title-font-family);
  --date-input-font-size: 14px;
  --date-input-height: var(--spacing-large);
  --date-input-input-color: var(--color-squanchy-gray-400);
  --date-input-input-padding-left: 5px;
  --date-input-input-padding-right: 5px;
  --date-input-padding: 1px 1px 1px 10px;
  --date-input-transition: border-color 100ms ease-in-out;

  --date-input-separator-color: var(--color-squanchy-gray-100);
  --date-input-separator-height: 20px;
  --date-input-separator-margin: 0 1px;
  --date-input-separator-width: 1px;

  --date-input-input-icon-color: var(--color-squanchy-gray-100);
  --date-input-input-icon-size: 16px;
  --date-input-icon-margin-right: 5px;

  --date-input-focus-background: var(--color-squanchy-gray-20);
  --date-input-focus-color: var(--color-picklerick-green-100);

  --date-input-error-background: var(--color-beth-pink-20);
  --date-input-error-color: rgba(223, 40, 95, 1);
}