@layer clickui {/* Design tokens use camelCase segments (e.g. fieldText). */
/* stylelint-disable custom-property-pattern */
/* The original styled-components used vendor-prefixed autofill/appearance
   overrides and native resize; `:autofill` overrides require `-webkit-box-shadow`
   specifically, so these are preserved verbatim for byte-for-byte parity. */
/* stylelint-disable property-no-vendor-prefix */
/* stylelint-disable plugin/no-unsupported-browser-features */
/* The disabled-state rules intentionally come last to win the cascade, matching
   the styled-components source order; this trips no-descending-specificity. */
/* stylelint-disable no-descending-specificity */
.wrapper__WHwoB {
  display: flex;
  width: inherit;
  justify-content: space-between;
  align-items: center;
  gap: var(--click-field-space-gap);
  border: 1px solid var(--click-field-color-stroke-default);
  border-radius: var(--click-field-radii-all);
  background: var(--click-field-color-background-default);
  color: var(--click-field-color-text-default);
  font: var(--click-field-typography-fieldText-default);
}

.wrapper__WHwoB span:first-of-type {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.wrapper__WHwoB *:autofill,
.wrapper__WHwoB *:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 50vh var(--click-field-color-background-default) inset;
  caret-color: var(--click-field-color-text-default);
  -webkit-text-fill-color: var(--click-field-color-text-default);
}

.wrapper__WHwoB:hover {
  border: 1px solid var(--click-field-color-stroke-hover);
  background: var(--click-field-color-background-hover);
  color: var(--click-field-color-text-hover);
}

.wrapper__WHwoB:hover *:autofill,
.wrapper__WHwoB:hover *:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 50vh var(--click-field-color-background-hover) inset;
  caret-color: var(--click-field-color-text-hover);
  -webkit-text-fill-color: var(--click-field-color-text-hover);
}

.wrapper_resize_vertical__43Ah9,
.wrapper_resize_horizontal__Cgy4t,
.wrapper_resize_both__WKn55 {
  overflow: auto;
}

.wrapper_resize_vertical__43Ah9 {
  resize: vertical;
}

.wrapper_resize_horizontal__Cgy4t {
  resize: horizontal;
}

.wrapper_resize_both__WKn55 {
  resize: both;
}

.wrapper__WHwoB:not(.wrapper_error__SB99e):focus-within,
.wrapper__WHwoB:not(.wrapper_error__SB99e)[data-state='open'] {
  border: 1px solid var(--click-field-color-stroke-active);
  background: var(--click-field-color-background-active);
  color: var(--click-field-color-text-active);
  font: var(--click-field-typography-fieldText-active);
}

.wrapper__WHwoB:not(.wrapper_error__SB99e):focus-within *:autofill,
.wrapper__WHwoB:not(.wrapper_error__SB99e):focus-within *:-webkit-autofill,
.wrapper__WHwoB:not(.wrapper_error__SB99e)[data-state='open'] *:autofill,
.wrapper__WHwoB:not(.wrapper_error__SB99e)[data-state='open'] *:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 50vh var(--click-field-color-background-active) inset;
  caret-color: var(--click-field-color-text-active);
  -webkit-text-fill-color: var(--click-field-color-text-active);
}

.wrapper_error__SB99e {
  border: 1px solid var(--click-field-color-stroke-error);
  background: var(--click-field-color-background-active);
  color: var(--click-field-color-text-error);
  font: var(--click-field-typography-fieldText-error);
}

.wrapper_error__SB99e *:autofill,
.wrapper_error__SB99e *:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 50vh var(--click-field-color-background-error) inset;
  caret-color: var(--click-field-color-text-error);
  -webkit-text-fill-color: var(--click-field-color-text-error);
}

.wrapper_error__SB99e:hover {
  border: 1px solid var(--click-field-color-stroke-error);
  color: var(--click-field-color-text-error);
}

.wrapper_error__SB99e:hover *:autofill,
.wrapper_error__SB99e:hover *:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 50vh var(--click-field-color-background-error) inset;
  caret-color: var(--click-field-color-text-error);
  -webkit-text-fill-color: var(--click-field-color-text-error);
}

.wrapper__WHwoB:disabled,
.wrapper__WHwoB.disabled__vXh63 {
  border: 1px solid var(--click-field-color-stroke-disabled);
  background: var(--click-field-color-background-disabled);
  color: var(--click-field-color-text-disabled);
  font: var(--click-field-typography-fieldText-disabled);
}

.wrapper__WHwoB:disabled *:autofill,
.wrapper__WHwoB:disabled *:-webkit-autofill,
.wrapper__WHwoB.disabled__vXh63 *:autofill,
.wrapper__WHwoB.disabled__vXh63 *:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 50vh var(--click-field-color-background-disabled) inset;
  caret-color: var(--click-field-color-text-disabled);
  -webkit-text-fill-color: var(--click-field-color-text-disabled);
}

.input__0fhe3 {
  width: 100%;
  padding: var(--click-field-space-y) 0;
  padding-right: var(--click-field-space-x);
  padding-left: var(--click-field-space-x);
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  outline: none;
}

.input_has-start-content__JXy30 {
  padding-left: 0;
}

.input_has-end-content__i10tl {
  padding-right: 0;
}

.input__0fhe3::placeholder {
  color: var(--click-field-color-placeholder-default);
}

.input__0fhe3:disabled::placeholder,
.input__0fhe3.disabled__vXh63::placeholder {
  color: var(--click-field-color-placeholder-disabled);
}

.number-input_hide-controls__sbWrG::-webkit-outer-spin-button,
.number-input_hide-controls__sbWrG::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.number-input_hide-controls__sbWrG {
  -moz-appearance: textfield;
}

.textarea__y-Il1 {
  width: 100%;
  padding: var(--click-field-space-y) var(--click-field-space-x);
  align-self: stretch;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  outline: none;
  resize: none;
}

.textarea__y-Il1::placeholder {
  color: var(--click-field-color-placeholder-default);
}

.icon-button__b4bWG {
  padding: var(--click-field-space-y) 0;
  border: none;
  background: transparent;
  color: inherit;
  outline: none;
}

.icon-button__b4bWG:not(:disabled) {
  cursor: pointer;
}

.icon-wrapper__wvaLj:first-of-type {
  padding-left: var(--click-field-space-gap);
}

.icon-wrapper__wvaLj:last-of-type {
  padding-right: var(--click-field-space-x);
}

.start-content__2ejJV {
  display: flex;
  padding-left: var(--click-field-space-x);
  align-items: center;
  align-self: stretch;
  gap: var(--click-field-space-gap);
  cursor: text;
}

.end-content__xNk8- {
  display: flex;
  padding-right: var(--click-field-space-x);
  flex-shrink: 0;
  align-items: center;
  align-self: stretch;
  gap: var(--click-field-space-gap);
  white-space: nowrap;
}
}