:host { box-sizing: border-box; }
:host *, :host ::before, :host ::after { box-sizing: inherit; }
[hidden] { display: none !important; }
:host([size="xs"]) { font-size: var(--wa-font-size-xs); }
:host([size="s"]), :host([size="small"]) { font-size: var(--wa-font-size-s); }
:host([size="m"]), :host([size="medium"]) { font-size: var(--wa-font-size-m); }
:host([size="l"]), :host([size="large"]) { font-size: var(--wa-font-size-l); }
:host([size="xl"]) { font-size: var(--wa-font-size-xl); }
:host { display: flex; flex-direction: column; }
[part~="form-control"] { display: contents; }
:is([part~="form-control-label"], [part~="label"]):has(:not(:empty)), :is([part~="form-control-label"], [part~="label"]).has-label { display: inline-flex; color: var(--wa-form-control-label-color); font-weight: var(--wa-form-control-label-font-weight); line-height: var(--wa-form-control-label-line-height); margin-block-end: 0.5em; }
:host([required]) :is([part~="form-control-label"], [part~="label"])::after { content: var(--wa-form-control-required-content); margin-inline-start: var(--wa-form-control-required-content-offset); color: var(--wa-form-control-required-content-color); }
[part~="hint"] {
  display: block; color: var(--wa-form-control-hint-color); font-weight: var(--wa-form-control-hint-font-weight); line-height: var(--wa-form-control-hint-line-height); margin-block-start: 0.5em; font-size: var(--wa-font-size-smaller);
  &:not(.has-slotted, .has-hint) { display: none; }
}
:host { border-width: 0px; }
:host(:focus) { outline: none; }
.text-field {
  display: flex; align-items: stretch; justify-content: start; position: relative; height: var(--wa-form-control-height); border-color: var(--wa-form-control-border-color); border-radius: var(--wa-form-control-border-radius); border-style: var(--wa-form-control-border-style); border-width: var(--wa-form-control-border-width); cursor: text; color: var(--wa-form-control-value-color); font-size: var(--wa-form-control-value-font-size); font-family: inherit; font-weight: var(--wa-form-control-value-font-weight); line-height: var(--wa-form-control-value-line-height); vertical-align: middle; width: 100%; transition-property: ; transition-duration: ; transition-delay: ; transition-behavior: ; transition-timing-function: var(--wa-transition-easing); background-color: var(--wa-form-control-background-color); box-shadow: var(--box-shadow); padding: 0 var(--wa-form-control-padding-inline); outline: var(--wa-focus-ring-style) var(--wa-focus-ring-width) transparent; outline-offset: var(--wa-focus-ring-offset);
  &:focus-within { outline-color: var(--wa-color-focus); }
  &:has(:disabled) { cursor: not-allowed; opacity: 0.5; }
}
:host([appearance="outlined"]) .text-field { background-color: var(--wa-form-control-background-color); border-color: var(--wa-form-control-border-color); }
:host([appearance="filled"]) .text-field { background-color: var(--wa-color-neutral-fill-quiet); border-color: var(--wa-color-neutral-fill-quiet); }
:host([appearance="filled-outlined"]) .text-field { background-color: var(--wa-color-neutral-fill-quiet); border-color: var(--wa-form-control-border-color); }
:host([pill]) .text-field { border-radius: var(--wa-border-radius-pill) !important; }
.text-field {
  &:has(:autofill), &:has(:-webkit-autofill) { background-color: var(--wa-color-brand-fill-quiet) !important; }
  & input, & textarea {
  height: 100%; padding: 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; outline: none; box-shadow: none; margin: 0px; cursor: inherit; appearance: none; font: inherit;
  &:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active { background-clip: text; background-color: transparent; -webkit-text-fill-color: inherit; }
}
}
input {
  flex: 1 1 auto; min-width: 0px; transition: inherit; background-color: rgba(118, 118, 118, 0); height: calc(var(--wa-form-control-height) - var(--border-width) * 2); padding-block: 0px; color: inherit;
  &:autofill {
  &, &:hover, &:focus, &:active { box-shadow: none; caret-color: var(--wa-form-control-value-color); }
}
  &::placeholder { color: var(--wa-form-control-placeholder-color); user-select: none; }
  &::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button, &::-webkit-search-results-decoration { appearance: none; }
  &:focus { outline: none; }
}
textarea {
  &:autofill {
  &, &:hover, &:focus, &:active { box-shadow: none; caret-color: var(--wa-form-control-value-color); }
}
  &::placeholder { color: var(--wa-form-control-placeholder-color); user-select: none; }
}
.start, .end {
  display: inline-flex; flex: 0 0 auto; align-items: center; cursor: default;
  &::slotted(wa-icon) { color: var(--wa-color-neutral-on-quiet); }
}
.start::slotted(*) { margin-inline-end: var(--wa-form-control-padding-inline); }
.end::slotted(*) { margin-inline-start: var(--wa-form-control-padding-inline); }
.clear, .password-toggle {
  display: inline-flex; align-items: center; justify-content: center; font-size: inherit; color: var(--wa-color-neutral-on-quiet); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: none; padding: 0px; transition: var(--wa-transition-normal) color; cursor: pointer; margin-inline-start: var(--wa-form-control-padding-inline);
  @media (hover: hover) {
  &:hover { color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover)); }
}
  &:active { color: color-mix(in oklab, currentColor, var(--wa-color-mix-active)); }
  &:focus { outline: none; }
}
:host([without-spin-buttons]) input[type="number"] {
  &::-webkit-outer-spin-button, &::-webkit-inner-spin-button { appearance: none; display: none; }
}