[data-theme="light"] .form-input,
.form-input {
  --form-input-bg: #fff;
  --form-input-color: #000;
  --form-input-border-color: #888;
  --form-input-padding-y: .5rem;
  --form-input-padding-x: .75rem;
  --form-input-border-radius: .25rem;
  --form-input-placeholder-color: hsla(0,0%,0%,.5);

  --form-input-focus-border-color: var(--color-primary);
  --form-input-focus-box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 40%, #FFF);

  display: block;
  width: 100%;
  max-width: 100%;
  font-size: 1rem;
  background-color: var(--form-input-bg);
  border: 1px solid var(--form-input-border-color);
  padding: var(--form-input-padding-y) var(--form-input-padding-x);
  border-radius: var(--form-input-border-radius);
  color: var(--form-input-color);
  outline: 0;
}

[data-theme="dark"] .form-input {
  --form-input-bg: #282828;
  --form-input-color: #fff;
  --form-input-border-color: #282828;
  --form-input-placeholder-color: hsla(0,100%,100%,.5);

  --form-input-focus-border-color: #679d82;
  --form-input-focus-box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 40%, #000);
}

.form-input::placeholder {
  color: var(--form-input-placeholder-color);
}

.form-input:focus,
.form-input:active {
  border-color: var(--form-input-focus-border-color);
  box-shadow: var(--form-input-focus-box-shadow);
}

.form-label {
  display: inline-block;
  margin-bottom: var(--spacing-2);
}

.form-text {
  font-size: 90%;
  color: var(--color-muted);
  margin-top: var(--spacing-1);
}

.form-check-inline {
  display: inline-block;
}

.form-check-inline + .form-check-inline {
  margin-right: var(--spacing-2);
}