:root {
  /**
    @prop --input-bg:
      Background of form field
      - default: var(--go-color-lightest)
  */
  --input-bg: var(--go-color-lightest);

  /**
    @prop --input-fg:
      Foreground (text) color of form field
      - default: var(--go-color-darkest)
  */
  --input-fg: var(--go-color-darkest);

  /**
    @prop --input-gap-inner:
      Inner immediately above and below input control
      - default: 0.5rem
  */
  --input-gap-inner: 0.5rem;

  /**
    @prop --input-padding-y:
      Vertical padding of input control
      - default: 0.5rem
  */
  --input-padding-y: 0.5rem;

  /**
    @prop --input-padding-x:
      Horizontal padding of input control
      - default: 0.5rem
  */
  --input-padding-x: 0.5rem;

  /**
    @prop --input-control-padding:
      Padding for input control
      - default: 0.75rem 0.5rem
  */
  --input-control-padding: var(--input-padding-y) var(--input-padding-x);

  /**
    @prop --input-radius:
      Border radius for the control
      - default: var(--radius-2)
  */
  --input-radius: var(--radius-2);

  /**
    @prop --input-border-color:
      border color of the input
      - default: var(--go-color-neutral-400)
  */
  --input-border-color: var(--go-color-neutral-400);
  /**
    @prop --input-border:
      Border style of input control
      - default: 1px solid var(--input-border-color)
  */
  --input-border: 1px solid var(--input-border-color);

  /**
    @prop --input-gap-outer:
      Outer margin of form field
      - default: 1rem 0
  */
  --input-gap-outer: 1rem 0;

  /**
    @prop --input-error-color:
      Error state color
      - default: var(--go-color-critical-600)
  */
  --input-error-color: var(--go-color-critical-600);

  /**
    @prop --input-focus-shadow:
      Shadow on focus
      - default: var(--inner-shadow-2)
  */
  --input-focus-shadow: var(--inner-shadow-2);

  /**
    @prop --input-icon-size:
      Icon size for input control
      - default: 1.5rem
  */
  --input-icon-size: 1.5rem;

  /**
    @prop --input-text-disabled-color:
      Text color for disabled
      - default: var(--go-color-neutral-700)
  */
  --input-text-disabled-color: var(--go-color-neutral-700);
  /**
    @prop --input-bg-disabled-color:
      Background color for disabled input control
      - default: rgba(var(--go-token-neutral-200), 0.4)
  */
  --input-bg-disabled-color: rgba(var(--go-token-neutral-200), 0.4);

  /**
    @prop --input-text-readonly-color:
      Text color for readonly input
      - default: var(--go-color-neutral-700)
  */
  --input-text-readonly-color: var(--go-color-neutral-700);
  /**
    @prop --input-bg-readonly-color:
      Background color for readonly input control
      - default: rgba(var(--go-token-neutral-200), 0.3)
  */
  --input-bg-readonly-color: rgba(var(--go-token-neutral-200), 0.3);
  /**
    @prop --input-presuf-bg:
      Background for prefix/suffix area
      - default: var(--go-color-neutral-100)
  */
  --input-presuf-bg: var(--go-color-neutral-100);
  /**
    @prop --input-presuf-text-color:
      Text color on prefix/suffix area
      - default: var(--go-color-neutral-800)
  */
  --input-presuf-text-color: var(--go-color-neutral-800);
  /**
    @prop --input-presuf-padding:
      Padding for prefix/suffix area
      - default: var(--input-control-padding)
  */
  --input-presuf-padding: var(--input-control-padding);
  /**
    @prop --input-hint-color:
      Hint text color
      - default: var(--go-color-neutral-800)
  */
  --input-hint-color: var(--go-color-neutral-800);

  /**
    @prop --input-hint-font-size:
      Font size of hint text
      - default: var(--go-size--1)
  */
  --input-hint-font-size: var(--go-size--1);

  /**
    @prop --control-selected-bg-color:
      Background color of checkbox or radio button when selected
      - default: var(--go-color-primary-600)
  */
  --control-selected-bg-color: var(--go-color-primary-600);
  /**
    @prop --control-selected-fg-color:
      Foreground color of checkbox or radio button when selected
      - default: rgb(var(--go-token-lightest))
  */
  --control-selected-fg-color: rgb(var(--go-token-lightest));

  /**
    @prop --input-label-font-size:
      Font size of label
      - default: 1rem
  */
  --input-label-font-size: 1rem;

  /**
    @prop --input-label-font-weight:
      Font weight of label
      - default: 700
  */
  --input-label-font-weight: 700;

  --control-focus-duration: 0.3s;

  /**
    @prop --field-icon-button-size:
      Size of icon button within go-field
      - default: 2.25rem
  */
  --field-icon-button-size: 2.25rem;
}