.dsa-text-field {
  --dsa-text-field--font: var(--ks-font-interface-s);
  --dsa-text-field--color: var(--ks-text-color-interface);
  --dsa-text-field--border: var(--ks-border-width-default) solid;
  --dsa-text-field--border-color: var(--ks-border-color-interface-interactive);
  --dsa-text-field--border-color_hover: var(--ks-border-color-interface-interactive-hover);
  --dsa-text-field--border-color_focus: var(--ks-border-color-interface-interactive-active);
  --dsa-text-field--border-color_active: var(--ks-border-color-interface-interactive-active);
  --dsa-text-field--background: transparent;
  --dsa-text-field--background_focus: transparent;
  --dsa-text-field--padding: 0.4rem 0.75rem 0.35rem;
  --dsa-text-field--transition: var(--ks-transition-hover);
  --dsa-text-field--shadow: var(--ks-box-shadow-control);
  --dsa-text-field--shadow_focus: 0 0 0 var(--ks-border-width-emphasized);
  --dsa-text-field__label--padding-bottom: 0.25em;
  --dsa-text-field__label--color: var(--ks-text-color-interface);
  --dsa-text-field__label--font: var(--ks-font-interface-s);
  --dsa-text-field__label--font-weight: var(--ks-font-weight-semi-bold);
  --dsa-text-field__placeholder--color: var(--ks-color-fg-alpha-5);
}

.dsa-text-field {
  --c-form-field_label--padding: 0 0 var(--dsa-text-field__label--padding-bottom, 0.25em) 0;
  --c-form-field--border: var(--dsa-text-field--border, var(--ks-border-width-default) solid);
  --c-form-field--border-color: var(--dsa-text-field--border-color, var(--ks-border-color-interface-interactive));
  --c-form-field-hover--border-color: var(
    --dsa-text-field--border-color_hover,
    var(--ks-border-color-interface-interactive-hover)
  );
  --c-form-field-focus--border-color: var(
    --dsa-text-field--border-color_focus,
    var(--ks-border-color-interface-interactive-active)
  );
  --c-form-field--background: var(--dsa-text-field--background, var(--ks-background-color-interface-interactive));
  --c-form-field--shadow: var(--ks-box-shadow-control);
  --c-form-field_focus--shadow: var(--dsa-text-field--shadow_focus, 0 0 4px 0);
  --c-form-field--background-disabled: var(
    --ks-background-color-interface-interactive-disabled,
    var(--ks-background-color-interface-interactive-disabled)
  );
  --c-form-field--color: var(--dsa-text-field--color, var(--ks-text-color-interface));
  --c-form-field_hover--border-color: var(
    --dsa-text-field--border-color_hover,
    var(--ks-border-color-interface-interactive-hover)
  );
  --c-form-field_focus--border-color: var(
    --dsa-text-field--border-color_active,
    var(--ks-border-color-interface-interactive-active)
  );
  --c-form-field_icon--size: calc(var(--ks-line-height-interface-m) * 0.75em);
  --c-form-field_icon--color: var(--ks-color-fg-alpha-3);
  --c-form-field_label--color: var(--dsa-text-field__label--color, var(--ks-text-color-interface));
}
.dsa-text-field .c-form-field__input {
  font: var(--dsa-text-field--font, var(--ks-font-interface-m));
  padding: var(--dsa-text-field--padding, 0.4rem 0.75rem 0.35rem);
  transition: var(--dsa-text-field--transition, var(--ks-transition-hover));
}
.dsa-text-field .c-form-field__input:not(:focus-visible) {
  box-shadow: var(--dsa-text-field--shadow, var(--ks-box-shadow-control));
}
.dsa-text-field .c-form-field__input::placeholder {
  color: var(--dsa-text-field__placeholder--color, var(--ks-color-fg-alpha-5));
}
.dsa-text-field .c-form-field__input:focus {
  background-color: var(--dsa-text-field--background_focus, var(--ks-background-color-interface-interactive-active));
}
.dsa-text-field .c-form-field__label {
  font: var(--dsa-text-field__label--font, var(--ks-font-interface-s));
  font-weight: var(--dsa-text-field__label--font-weight, var(--ks-font-weight-regular));
}