.app-input-focused {
  --wm-form-controls-border-color: var(--wm-color-primary);
  --wm-form-controls-border-width: var(--wm-border-width-1);
  --wm-form-controls-background: var(--wm-color-outline-variant);
  --wm-form-controls-color: var(--wm-color-black);
  --wm-form-controls-floating-color: var(--wm-color-surface-dim);
  --wm-form-controls-floating-font-size: var(--wm-body-medium-font-size);
  --wm-form-controls-floating-font-weight: var(--wm-body-medium-font-weight);
  --wm-form-controls-floating-font-family: var(--wm-body-medium-font-family);
  --wm-form-controls-floating-top: var(--wm-space-3);
  --wm-form-controls-floating-left: var(--wm-space-4);
  --wm-form-controls-floating-padding: var(--wm-space-0);
}

.app-input-disabled {
  --wm-form-controls-border-color: var(--wm-color-shadow);
  --wm-form-controls-border-width: var(--wm-border-width-1);
  --wm-form-controls-background: var(--wm-color-surface-dim);
  --wm-form-controls-color: var(--wm-color-scrim);
  --wm-form-controls-opacity: 0.67;
}

.form-controls-filled {
  --wm-form-controls-opacity: var(--wm-border-width-1);
  --wm-form-controls-min-height: 56px;
  --wm-form-controls-min-width: 210px;
  --wm-form-controls-padding: var(--wm-space-4);
  --wm-form-controls-border-color: var(--wm-color-outline);
  --wm-form-controls-border-radius: var(--wm-radius-sm) var(--wm-radius-sm) 0 0;
  --wm-form-controls-border-style: var(--wm-border-style-base);
  --wm-form-controls-border-width: 0 0 var(--wm-border-width-1) 0;
  --wm-form-controls-placeholder-color: var(--wm-color-on-surface-variant);
  --wm-form-controls-background: var(--wm-color-surface-dim);
  --wm-form-controls-color: var(--wm-color-black);
  --wm-form-controls-floating-color: var(--wm-color-on-surface-variant);
  --wm-form-controls-floating-top: var(--wm-space-5);
  --wm-form-controls-floating-left: var(--wm-space-3);
  --wm-form-controls-label-color: var(--wm-color-on-surface-variant);
  --wm-form-controls-label-background: var(--wm-color-transparent);
  --wm-form-controls-label-font-size: var(--wm-label-large-font-size);
  --wm-form-controls-label-font-weight: var(--wm-label-large-font-weight);
  --wm-form-controls-label-font-family: var(--wm-label-large-font-family);
  --wm-form-controls-label-margin-vertical: var(--wm-space-0);
  --wm-form-controls-label-margin-horizontal: var(--wm-space-0);
}

.form-controls-filled.app-input-focused {
  --wm-form-controls-min-height: 56px;
  --wm-form-controls-min-width: 210px;
  --wm-form-controls-border-width: 0 0 var(--wm-border-width-2) 0;
  --wm-form-controls-border-style: var(--wm-border-style-base);
  --wm-form-controls-border-radius: var(--wm-radius-sm) var(--wm-radius-sm) 0 0;
  --wm-form-controls-floating-color: var(--wm-color-outline);
  --wm-form-controls-floating-top: var(--wm-space-5);
  --wm-form-controls-floating-left: var(--wm-space-3);
  --wm-form-controls-label-color: var(--wm-color-outline);
  --wm-form-controls-padding: var(--wm-space-4);
}

.form-controls-filled.app-input-disabled {
  --wm-form-controls-border-color: var(--wm-color-shadow);
  --wm-form-controls-border-width: 0 0 var(--wm-border-width-1) 0;
  --wm-form-controls-background: var(--wm-color-surface-dim);
  --wm-form-controls-color: var(--wm-color-scrim);
  --wm-form-controls-opacity: 0.67;
}

.form-controls-outlined {
  --wm-form-controls-opacity: 1;
  --wm-form-controls-min-height: 56px;
  --wm-form-controls-min-width: 210px;
  --wm-form-controls-font-size: var(--wm-body-large-font-size);
  --wm-form-controls-font-weight: var(--wm-body-large-font-weight);
  --wm-form-controls-font-family: var(--wm-body-large-font-family);
  --wm-form-controls-padding: var(--wm-space-4);
  --wm-form-controls-border: var(--wm-border-width-1);
  --wm-form-controls-placeholder-color: var(--wm-color-on-surface);
  --wm-form-controls-background: transparent;
  --wm-form-controls-color: var(--wm-color-black);
  --wm-form-controls-label-color: var(--wm-color-on-surface);
  --wm-form-controls-label-background: var(--wm-color-transparent);
  --wm-form-controls-floating-color: var(--wm-color-surface-dim);
  --wm-form-controls-floating-top: var(--wm-space-5);
  --wm-form-controls-floating-left: var(--wm-space-4);
}

.form-controls-outlined.app-input-focused {
  --wm-form-controls-min-height: 56px;
  --wm-form-controls-min-width: 210px;
  --wm-form-controls-border-color: var(--wm-color-secondary);
  --wm-form-controls-border-width: var(--wm-border-width-1);
  --wm-form-controls-padding: var(--wm-space-4);
  --wm-form-controls-background: transparent;
  --wm-form-controls-color: var(--wm-color-black);
  --wm-form-controls-floating-color: var(--wm-color-primary);
  --wm-form-controls-floating-top: var(--wm-space-5);
  --wm-form-controls-floating-left: var(--wm-space-4);
}

.form-controls-outlined.app-input-disabled {
  --wm-form-controls-border: 1px solid var(--wm-color-shadow);
  --wm-form-controls-background: transparent;
  --wm-form-controls-color: var(--wm-color-scrim);
  --wm-form-controls-opacity: 0.67;
}