$default-variables: (
  "Input____bg-color": rgba(var(--color--main-rgb), .02),
  "Input--focused____bg-color": rgba(var(--color--main-rgb), .02),
  "Input--invalid____bg-color": rgba(var(--color--alert-rgb), .02),

  "Input____border-color": var(--color--gray-200),
  "Input--focused____border-color": var(--color--blue-500),
  "Input--invalid____border-color": var(--color--alert-outline),
  "Input____border-width": 1px,

  "Input____color": var(--color--main),
  "Input--focused____color": var(--color--main),
  "Input--invalid____color": var(--color--main),

  "Input--focused____outline-color": var(--color--blue-500),

  "Input____line-height": var(--line-height--copy),
  "Input____radius": var(--radius--med),
  "Input____transition-duration": var(--timing--hover),

  "Input____padding": .75em,
  "Input--mini____padding": .5em .75em,

  "Input--Affix____color": var(--Input____color),
  "Input--Affix____bg-color": var(--color--invert),
  "Input--Affix____border-color": var(--Input____border-color),

  "Input--Placeholder____color": var(--color--gray-1),

  "Input--Search____radius": var(--radius--pill),

  "Input--Icon____size": 16px,

  "Input--Icon____margin": 0.75em,

  "Input--Search____padding-left": 1em
);

@mixin generate-input-theme-variables($theme-variables: ()) {
  $variables: map-merge($default-variables, $theme-variables);

  @each $name, $value in $variables {
    --#{$name}: #{$value};
  }
}