/* Set variables for all modes */
body {
  --sd-input-background-color: var(--sd-sys-color-surface);

  --sd-input-border-color: var(--sd-sys-color-surface-border);
  --sd-input-border-focused-color: var(--sd-sys-color-primary-border);
  --sd-input-border-radius: var(--ion-border-radius-default);

  --sd-input-color: var(--sd-sys-color-on-surface-emphasis-variant);
  --sd-input-caret-color: var(--sd-palette-primary-500);

  --sd-input-icon-color: var(--sd-sys-color-on-surface-muted);
  --sd-input-icon-hint-color: var(--sd-sys-color-on-surface-subtle);

  --sd-input-label-color: var(--sd-sys-color-on-surface-emphasis);

  --sd-input-outline-color: var(--sd-sys-color-primary-outline);
  --sd-input-placeholder-color: var(--sd-sys-color-on-surface-muted);
  --sd-input-placeholder-opacity: 1;
  --sd-input-hint-color: var(--sd-sys-color-on-surface);

  --sd-input-disabled-background-color: var(--sd-sys-color-surface-disabled);
  --sd-input-disabled-color: var(--sd-sys-color-on-surface-muted);

  --sd-input-error-border-color: var(--sd-palette-danger-300);
  --sd-input-error-caret-color: var(--sd-palette-danger-500);
  --sd-input-error-icon-hint-color: var(--sd-palette-danger-500);
  --sd-input-error-message-color: var(--sd-palette-danger-500);
  --sd-input-error-outline-color: var(--sd-palette-danger-100);

  --sd-input-icon-size: 20px;
  --sd-input-icon-hint-size: 16px;
  --sd-input-height: 42px;
  --sd-input-inner-height: 24px;
  --sd-input-inline-padding: 8px;
  --sd-input-padding-bottom: 8px;
  --sd-input-padding-end: 12px;
  --sd-input-padding-start: 12px;
  --sd-input-padding-top: 8px;

  --sd-textarea-height: 120px;
  --sd-textarea-padding-bottom: 14px;
  --sd-textarea-padding-end: 12px;
  --sd-textarea-padding-start: 14px;
  --sd-textarea-padding-top: 12px;
}

/* Set variables for iOS only */
.ios {
}

/* Set variables for Material Design only */
.md {
}