* {
  box-sizing: border-box;
}

*:active {
  outline: none;
}

*:focus-visible {
  outline: none;
  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc);
}

:host {
  box-shadow: none !important;
}

::-moz-focus-inner {
  border: none;
}

input,
textarea,
button {
  font-family: inherit;
  font-size: inherit;
  font-stretch: inherit;
}

:host(.sr),
:host(.sr) button {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.sr,
.sr button {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.hidden {
  display: none;
}

:host([hidden]) {
  display: none;
}

.invisible {
  visibility: hidden;
}

@container style(--t-prefers-motion: "reduced") {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-delay: 0ms !important;
  }
}
@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")) {
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
      animation-delay: 0ms !important;
      transition-delay: 0ms !important;
    }
  }
}
/**
 * @prop --tct-input-margin: (<length-percentage>+) Controls the outer margin of the input host.
 * @prop --tct-input-margin-top: (<length-percentage>) Controls the top margin of the input host when --tct-input-margin is not set.
 * @prop --tct-input-margin-bottom: (<length-percentage>) Controls the bottom margin of the input host when --tct-input-margin is not set.
 * @prop --tct-input-padding?: (<length-percentage>+) Controls the optional inner padding of the input field.
 * @prop --tct-input-font-color: (<color>) Controls the text color of the input field.
 * @prop --tct-input-font-size?: (<length-percentage>) Controls the optional font size of the input field.
 * @prop --tct-input-font-weight: (<number>) Controls the font weight of the input field.
 * @prop --tct-input-letter-spacing?: (<length>) Controls the optional letter spacing of the input field.
 * @prop --tct-input-align: (<custom-ident>) Controls the text alignment of the input field.
 * @prop --tct-input-height: (<length>) Controls the height of the input field.
 * @prop --tct-input-min-height: (<length>) Controls the minimum height of the input container.
 * @prop --tct-input-max-height?: (<length>) Controls the optional maximum height of the input container.
 * @prop --tct-input-tween: (*) Controls the transition timing of input state changes (background, border, etc.).
 * @prop --tct-input-background: (<color>) Controls the background color of the input container in its default state.
 * @prop --tct-input-backdrop-filter?: (*) Controls the optional backdrop-filter of the input container in its default state.
 * @prop --tct-input-border-color: (<color>) Controls the border color of the input container in its default state.
 * @prop --tct-input-border-top-width: (<length>) Controls the top border width of the input container.
 * @prop --tct-input-border-right-width: (<length>) Controls the right border width of the input container.
 * @prop --tct-input-border-bottom-width: (<length>) Controls the bottom border width of the input container.
 * @prop --tct-input-border-left-width: (<length>) Controls the left border width of the input container.
 * @prop --tct-input-border-top-left-radius: (<length-percentage>) Controls the top-left corner radius of the input container.
 * @prop --tct-input-border-top-right-radius: (<length-percentage>) Controls the top-right corner radius of the input container.
 * @prop --tct-input-border-bottom-right-radius: (<length-percentage>) Controls the bottom-right corner radius of the input container.
 * @prop --tct-input-border-bottom-left-radius: (<length-percentage>) Controls the bottom-left corner radius of the input container.
 * @prop --tct-input-box-shadow?: (*) Controls the optional box shadow of the input container in its default state.
 * @prop --tct-input-container-gap: (<length-percentage>) Controls the gap between elements inside the input container.
 * @prop --tct-input-container-padding-inline?: (<length-percentage>+) Controls the optional inline padding of the input container.
 * @prop --tct-input-horizontal-gap?: (<length-percentage>) Controls the optional horizontal gap inside icon containers.
 * @prop --tct-input-disabled-opacity: (<number>) Controls the opacity of the input container when disabled.
 * @prop --tct-input-disabled-backdrop-filter?: (*) Controls the optional backdrop-filter of the input container when disabled.
 * @prop --tct-input-hover-background: (<color>) Controls the background color of the input container on hover.
 * @prop --tct-input-hover-backdrop-filter?: (*) Controls the optional backdrop-filter of the input container on hover.
 * @prop --tct-input-hover-border-color: (<color>) Controls the border color of the input container on hover.
 * @prop --tct-input-hover-box-shadow: (*) Controls the box shadow of the input container on hover.
 * @prop --tct-input-hover-ring-color?: (<color>) Controls the optional outer ring color of the input hover effect.
 * @prop --tct-input-focus-background: (<color>) Controls the background color of the input container on focus.
 * @prop --tct-input-focus-backdrop-filter?: (*) Controls the optional backdrop-filter of the input container on focus.
 * @prop --tct-input-focus-border-color: (<color>) Controls the border color of the input container on focus.
 * @prop --tct-input-focus-box-shadow: (*) Controls the box shadow of the input container on focus.
 * @prop --tct-input-error-background: (<color>) Controls the background color of the input container in the error state.
 * @prop --tct-input-error-backdrop-filter?: (*) Controls the optional backdrop-filter of the input container in the error state.
 * @prop --tct-input-error-border-color: (<color>) Controls the border color of the input container in the error state.
 * @prop --tct-input-error-box-shadow: (*) Controls the box shadow of the input container in the error state.
 * @prop --tct-input-error-focus-background: (<color>) Controls the background color of the input container in the error+focus state.
 * @prop --tct-input-error-focus-backdrop-filter?: (*) Controls the optional backdrop-filter of the input container in the error+focus state.
 * @prop --tct-input-error-focus-border-color: (<color>) Controls the border color of the input container in the error+focus state.
 * @prop --tct-input-error-focus-box-shadow: (*) Controls the box shadow of the input container in the error+focus state.
 * @prop --tct-input-error-hover-background: (<color>) Controls the background color of the input container in the error+hover state.
 * @prop --tct-input-error-hover-backdrop-filter?: (*) Controls the optional backdrop-filter of the input container in the error+hover state.
 * @prop --tct-input-error-hover-border-color: (<color>) Controls the border color of the input container in the error+hover state.
 * @prop --tct-input-error-hover-box-shadow: (*) Controls the box shadow of the input container in the error+hover state.
 * @prop --tct-input-error-label-font-color?: (<color>) Controls the optional text color of the input label in the error state.
 * @prop --tct-input-error-prefix-background: (<color>) Controls the background color of the input prefix in the error state.
 * @prop --tct-input-error-prefix-font-color?: (<color>) Controls the optional text color of the input prefix in the error state.
 * @prop --tct-input-placeholder-font-color: (<color>) Controls the placeholder text color of the input.
 * @prop --tct-input-placeholder-font-size?: (<length-percentage>) Controls the optional font size of the input placeholder text.
 * @prop --tct-input-placeholder-font-weight?: (<number>) Controls the optional font weight of the input placeholder text.
 * @prop --tct-input-placeholder-padding?: (<length-percentage>+) Controls the optional inner padding of the input placeholder text.
 * @prop --tct-input-autofill-background: (<color>) Controls the background color of the input field when autofilled.
 * @prop --tct-input-autofill-font-color?: (<color>) Controls the optional text color of the input field when autofilled.
 * @prop --tct-input-label-font-color?: (<color>) Controls the optional text color of the input label.
 * @prop --tct-input-label-font-size?: (<length-percentage>) Controls the optional font size of the input label.
 * @prop --tct-input-label-font-weight: (<number>) Controls the font weight of the input label.
 * @prop --tct-input-label-letter-spacing?: (<length>) Controls the optional letter spacing of the input label.
 * @prop --tct-input-label-text-transform?: (<custom-ident>) Controls the optional text transform of the input label.
 * @prop --tct-input-label-padding: (<length-percentage>+) Controls the inner padding of the input label.
 * @prop --tct-input-label-margin: (<length-percentage>+) Controls the outer margin of the input label row.
 * @prop --tct-input-label-gap: (<length-percentage>) Controls the gap between elements within the input label row.
 * @prop --tct-input-label-line-height?: (<number> | <length-percentage>) Controls the optional line height of the input label row.
 * @prop --tct-input-label-optional-margin: (<length-percentage>+) Controls the outer margin of the "(optional)" indicator next to the label.
 * @prop --tct-input-label-optional-font-color: (<color>) Controls the text color of the "(optional)" indicator next to the label.
 * @prop --tct-input-label-optional-font-size: (<length-percentage>) Controls the font size of the "(optional)" indicator next to the label.
 * @prop --tct-input-label-optional-font-weight: (<number>) Controls the font weight of the "(optional)" indicator next to the label.
 * @prop --tct-input-count-font-color: (<color>) Controls the text color of the character-count indicator.
 * @prop --tct-input-count-font-size: (<length-percentage>) Controls the font size of the character-count indicator.
 * @prop --tct-input-count-font-weight: (<number>) Controls the font weight of the character-count indicator.
 * @prop --tct-input-count-width: (<length-percentage>) Controls the width of the character-count indicator.
 * @prop --tct-input-icon-stroke-primary: (<color>) Controls the primary stroke color of icons rendered inside the input.
 * @prop --tct-input-icon-stroke-secondary: (<color>) Controls the secondary stroke color of icons rendered inside the input.
 * @prop --tct-input-icon-size: (<length>) Controls the size of icons rendered inside the input.
 * @prop --tct-input-icon-container-font-size?: (<length-percentage>) Controls the optional font size of content inside the input icon containers.
 * @prop --tct-input-icon-container-icon-min-width: (<length>) Controls the minimum width of icon slots inside the input icon containers.
 * @prop --tct-input-icon-container-empty-display: (<custom-ident>) Controls the display value of icon containers when empty.
 * @prop --tct-input-btn-hover-background?: (<color>) Controls the optional background color of icon buttons inside the input on hover.
 * @prop --tct-input-btn-icon-stroke-primary?: (<color>) Controls the optional primary stroke color of icon buttons inside the input.
 * @prop --tct-input-btn-icon-stroke-secondary?: (<color>) Controls the optional secondary stroke color of icon buttons inside the input.
 * @prop --tct-input-prefix-background: (<color>) Controls the background color of the input prefix.
 * @prop --tct-input-prefix-border-color: (<color>) Controls the border color of the input prefix separator.
 * @prop --tct-input-prefix-border-width: (<length>) Controls the border width of the input prefix separator.
 * @prop --tct-input-prefix-font-color?: (<color>) Controls the optional text color of the input prefix.
 * @prop --tct-input-prefix-font-size?: (<length-percentage>) Controls the optional font size of the input prefix.
 * @prop --tct-input-prefix-font-weight: (<number>) Controls the font weight of the input prefix.
 * @prop --tct-input-visibility-toggle-font-color: (<color>) Controls the text color of the password visibility toggle button.
 * @prop --tct-input-visibility-toggle-font-size: (<length-percentage>) Controls the font size of the password visibility toggle button.
 * @prop --tct-input-visibility-toggle-font-weight: (<number>) Controls the font weight of the password visibility toggle button.
 * @prop --tct-input-visibility-toggle-padding: (<length-percentage>+) Controls the inner padding of the password visibility toggle button.
 * @prop --tct-input-message-box-shadow: (*) Controls the box shadow of the input messages container.
 * @prop --tct-input-messages-font-color?: (<color>) Controls the optional text color of the input messages container.
 * @prop --tct-input-messages-margin-top: (<length-percentage>) Controls the top margin of the input messages container.
 * @prop --tct-input-messages-tween: (*) Controls the transition timing of the input messages container.
 * @prop --tct-input-messages-z-index: (<integer>) Controls the z-index of the input messages container.
 */
:host {
  --comp-default-input-margin: var(--tct-input-margin-top, var(--t-input-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-input-margin-bottom, var(--t-input-margin-bottom, var(--app-scale-5x, 25px)));
  display: block;
  margin: var(--tct-input-margin, var(--comp-default-input-margin));
  font-size: var(--tct-input-font-size, var(--t-input-font-size, var(--app-font-size, inherit)));
  letter-spacing: inherit;
}

:host([hidden]) {
  display: none;
}

.field-container,
.input-container {
  position: relative;
}

.field-container {
  --comp-input-tween: var(--tct-input-tween, var(--t-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))));
}
.field-container.is-small .btn-clear {
  --tct-btn-icon-width: 20px;
  --tct-icon-size: var(--tct-input-icon-size, var(--const-px-18, 18px));
}

.input-label {
  --comp-label-padding: var(--tct-input-label-padding, 0 var(--tct-input-label-padding-right, var(--t-input-label-padding-right, 0)) 0 var(--tct-input-label-padding-left, var(--t-input-label-padding-left, 0)));
  display: block;
  padding: var(--comp-label-padding);
  color: var(--tct-input-label-font-color, var(--t-input-label-font-color, inherit));
  font-size: var(--tct-input-label-font-size, var(--t-input-label-font-size, inherit));
  font-weight: var(--tct-input-label-font-weight, var(--t-input-label-font-weight, 600));
  text-transform: var(--tct-input-label-text-transform, var(--t-input-label-text-transform, none));
  letter-spacing: var(--tct-input-label-letter-spacing, var(--t-input-label-letter-spacing, inherit));
  transition: color var(--comp-input-tween);
}

.optional-tag {
  --comp-label-optional-margin: var(--tct-input-label-optional-margin, 0 0 0 var(--tct-input-label-optional-margin-left, var(--t-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px)))));
  margin: var(--comp-label-optional-margin);
  color: var(--tct-input-label-optional-font-color, var(--t-input-label-optional-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77)))));
  font-size: var(--tct-input-label-optional-font-size, var(--t-input-label-optional-font-size, var(--app-font-size-small, var(--const-px-12, 12px))));
  font-weight: var(--tct-input-label-optional-font-weight, var(--t-input-label-optional-font-weight, 400));
  line-height: 1em;
}

.count-tag {
  color: var(--tct-input-count-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77))));
  font-size: var(--tct-input-count-font-size, var(--app-font-size-small, var(--const-px-12, 12px)));
  font-weight: var(--tct-input-count-font-weight, 400);
  text-align: right;
  width: var(--tct-input-count-width, auto);
}

.label-wrapper {
  --comp-label-margin: var(--tct-input-label-margin, var(--tct-input-label-margin-top, var(--t-input-label-margin-top, 0)) 0 var(--tct-input-label-margin-bottom, var(--t-input-label-margin-bottom, var(--tct-scale-1, var(--app-scale-1x, 5px)))));
  display: flex;
  gap: var(--tct-input-label-gap, var(--app-scale-2x, 10px));
  justify-content: space-between;
  align-items: end;
  margin: var(--comp-label-margin);
  line-height: var(--tct-input-label-line-height, var(--t-input-label-line-height, inherit));
}
.label-wrapper:has(label.sr) {
  margin: 0;
}

.input-container {
  --comp-input-background: var(--tct-input-background, var(--tct-input-bg, var(--t-input-bg, var(--t-gray-14, #fcfcfd))));
  --comp-input-backdrop-filter: var(--tct-input-backdrop-filter, none);
  --comp-input-horizontal-gap: var(--tct-input-horizontal-gap, var(--t-input-horizontal-gap, 0));
  --comp-input-border-top-left-radius: var(--tct-input-border-top-left-radius, var(--t-input-border-top-left-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));
  --comp-input-border-top-right-radius: var(--tct-input-border-top-right-radius, var(--t-input-border-top-right-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));
  --comp-input-border-bottom-right-radius: var(--tct-input-border-bottom-right-radius, var(--t-input-border-bottom-right-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));
  --comp-input-border-bottom-left-radius: var(--tct-input-border-bottom-left-radius, var(--t-input-border-bottom-left-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));
  --comp-calc-input-border-top-left-radius: calc(
      var(--comp-input-border-top-left-radius) - var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) - var(--tct-input-border-left-width, var(--t-input-border-left-width, 1px))
  );
  --comp-calc-input-border-top-right-radius: calc(
      var(--comp-input-border-top-right-radius) - var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) - var(--tct-input-border-right-width, var(--t-input-border-right-width, 1px))
  );
  --comp-calc-input-border-bottom-left-radius: calc(
      var(--comp-input-border-bottom-left-radius) - var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) - var(--tct-input-border-left-width, var(--t-input-border-left-width, 1px))
  );
  --comp-calc-input-border-bottom-right-radius: calc(
      var(--comp-input-border-bottom-right-radius) - var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) - var(--tct-input-border-right-width, var(--t-input-border-right-width, 1px))
  );
  --comp-input-border-radius: var(--comp-input-border-top-left-radius) var(--comp-input-border-top-right-radius)
      var(--comp-input-border-bottom-right-radius) var(--comp-input-border-bottom-left-radius);
  --comp-input-border-width: var(--tct-input-border-top-width, 1px) var(--tct-input-border-right-width, 1px)
      var(--tct-input-border-bottom-width, 1px) var(--tct-input-border-left-width, 1px);
  --comp-input-border-color: var(--tct-input-border-color, var(--t-input-border-color, var(--t-a11y-gray-color-AA, #404040)));
  --comp-input-prefix-clearance: calc(3 * var(--tct-input-prefix-font-size, var(--const-px-14, 14px)) + var(--tct-scale-1, 5px));
  --comp-input-icon-clearance: 34px;
  --comp-input-min-height: var(--tct-input-min-height, var(--t-input-min-height, 44px));
  --comp-input-max-height: var(--tct-input-max-height, var(--t-input-max-height));
  --comp-input-hover-ring-color: var(--tct-input-hover-ring-color, var(--t-input-hover-ring-color));
  --comp-input-hover-ring: 0 0 0 2px var(--t-base), 0 0 0 4px var(--comp-input-hover-ring-color), var(--tct-input-hover-box-shadow, var(--t-input-hover-box-shadow, 0 0 transparent));
  background: var(--comp-input-background);
  backdrop-filter: var(--comp-input-backdrop-filter);
  display: flex;
  align-items: center;
  gap: var(--tct-input-container-gap, var(--app-scale-2x, 10px));
  padding-inline: var(--tct-input-container-padding-inline);
  border-width: var(--comp-input-border-width);
  border-style: solid;
  border-color: var(--comp-input-border-color);
  border-radius: var(--comp-input-border-radius);
  box-shadow: var(--tct-input-box-shadow, var(--t-input-box-shadow, none));
  transition: background var(--comp-input-tween), backdrop-filter var(--comp-input-tween), border-width var(--comp-input-tween), border-color var(--comp-input-tween), box-shadow var(--comp-input-tween);
}
:host([disabled]:not([disabled=false])) .input-container {
  cursor: not-allowed;
  opacity: var(--tct-input-disabled-opacity, var(--t-input-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));
  backdrop-filter: var(--tct-input-disabled-backdrop-filter, var(--comp-input-backdrop-filter));
}
.has-error .input-container {
  border-color: var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a));
  backdrop-filter: var(--tct-input-error-backdrop-filter, var(--comp-input-backdrop-filter));
  background: var(--tct-input-error-background, var(--comp-input-background));
  box-shadow: var(--tct-input-error-box-shadow, var(--comp-input-hover-ring));
}
.input-container:hover {
  border-color: var(--tct-input-hover-border-color, var(--comp-input-border-color));
  background: var(--tct-input-hover-background, var(--comp-input-background));
  backdrop-filter: var(--tct-input-hover-backdrop-filter, var(--comp-input-backdrop-filter));
  box-shadow: var(--tct-input-hover-box-shadow, var(--comp-input-hover-ring));
}
.has-error .input-container:hover {
  border-color: var(--tct-input-error-hover-border-color, var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a)));
  backdrop-filter: var(--tct-input-error-hover-backdrop-filter, var(--tct-input-error-backdrop-filter, var(--tct-input-hover-backdrop-filter, var(--comp-input-backdrop-filter))));
  background: var(--tct-input-error-hover-background, var(--tct-input-error-background, var(--comp-input-background)));
  box-shadow: var(--tct-input-error-hover-box-shadow, var(--tct-input-error-box-shadow, var(--comp-input-hover-ring)));
}
.has-focus .input-container {
  border-color: var(--tct-input-focus-border-color, var(--t-input-focus-border-color, var(--comp-input-border-color)));
  background: var(--tct-input-focus-background, var(--comp-input-background));
  backdrop-filter: var(--tct-input-focus-backdrop-filter, var(--comp-input-backdrop-filter));
  box-shadow: var(--tct-input-focus-box-shadow, var(--const-double-focus-ring));
}
.has-focus.has-error .input-container, .has-focus.has-error .input-container:hover {
  border-color: var(--tct-input-error-focus-border-color, var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a)));
  backdrop-filter: var(--tct-input-error-focus-backdrop-filter, var(--tct-input-error-backdrop-filter, var(--tct-input-focus-backdrop-filter, var(--comp-input-backdrop-filter))));
  background: var(--tct-input-error-focus-background, var(--tct-input-error-background, var(--comp-input-background)));
  box-shadow: var(--tct-input-error-focus-box-shadow, var(--tct-input-error-box-shadow, var(--const-double-focus-ring)));
}
.input-container:has(.input-field:is(:-webkit-autofill, :autofill)) {
  background: var(--tct-input-autofill-background, #faffbc);
  color: var(--tct-input-autofill-font-color, var(--t-text, inherit));
}
.input-container:has(.input-field:is(:-webkit-autofill, :autofill)) .input-field {
  box-shadow: 0 0 0 1000px var(--tct-input-autofill-background, #faffbc) inset;
  color: var(--tct-input-autofill-font-color, var(--t-text, inherit));
  -webkit-text-fill-color: var(--tct-input-autofill-font-color, var(--t-text, inherit));
}

.standard-input-container {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
}

.visible-last-count-value {
  position: absolute;
  inset: 0;
  z-index: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: var(--tct-input-padding, 0);
  color: var(--tct-input-font-color, var(--t-input-font-color, var(--t-text, inherit)));
  font-weight: var(--tct-input-font-weight, var(--t-input-font-weight, 400));
  font-family: var(--tct-input-visible-last-count-font-family, monospace);
  letter-spacing: var(--tct-input-letter-spacing, var(--t-input-letter-spacing, inherit));
  pointer-events: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visible-last-count-content {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  transform: translateX(calc(var(--tct-input-visible-last-count-scroll-left, 0px) * -1));
}

.visible-last-count-character {
  display: inline-grid;
  flex: 0 0 auto;
}
.visible-last-count-character::before {
  content: attr(data-character);
  grid-area: 1/1;
  visibility: hidden;
}

.visible-last-count-visible-value {
  flex: 0 0 auto;
}

.visible-last-count-mask {
  grid-area: 1/1;
  justify-self: center;
  transform: translateY(var(--tct-input-visible-last-count-mask-translate-y, 0));
}

.input-field {
  flex: 1;
  border: 0;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  min-height: var(--comp-input-min-height);
  max-height: var(--comp-input-max-height);
  overflow-y: hidden;
  height: var(--tct-input-height, var(--t-input-height, 44px));
  width: 100%;
  padding: var(--tct-input-padding, 0);
  background: transparent;
  color: var(--tct-input-font-color, var(--t-input-font-color, var(--t-text, inherit)));
  display: inline-block;
  text-align: var(--tct-input-align, "start");
  font-weight: var(--tct-input-font-weight, var(--t-input-font-weight, 400));
  letter-spacing: var(--tct-input-letter-spacing, var(--t-input-letter-spacing, inherit));
  /* To remove up/down arrow in number field for webkit based browser */
  /* For Firefox */
}
.input-field.has-visible-last-count {
  position: relative;
  z-index: 1;
  color: transparent;
  caret-color: var(--tct-input-font-color, var(--t-input-font-color, var(--t-text, auto)));
  -webkit-text-fill-color: transparent;
  font-family: var(--tct-input-visible-last-count-font-family, monospace);
}
.input-field:focus {
  outline: none;
  box-shadow: none;
}
.input-field::-webkit-outer-spin-button, .input-field::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.input-field[type=number] {
  -moz-appearance: textfield;
}
.input-field::-ms-reveal, .input-field::-ms-clear {
  display: none;
}
.input-field[type=search]::-webkit-search-decoration, .input-field[type=search]::-webkit-search-cancel-button, .input-field[type=search]::-webkit-search-results-button, .input-field[type=search]::-webkit-search-results-decoration {
  display: none;
}
.input-field[disabled]:not([disabled=false]) {
  cursor: not-allowed;
}
.right-aligned .input-field {
  text-align: right;
}
.input-field:is(input) {
  flex: 1;
}
.input-field:is(input)[readonly]:not([readonly=false]) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.input-field:is(button) {
  display: inline-flex;
  align-items: center;
}
.has-custom-display .input-field:is(button) {
  height: auto;
  padding: 0;
}
.input-field:is(button) span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.input-field[readonly]:not([readonly=false]) {
  pointer-events: none;
}

.custom-display-container {
  max-width: 100%;
}
.has-custom-display .custom-display-container {
  width: 100%;
}
.has-custom-display .custom-display-container ::slotted([slot=custom-display]) {
  --comp-default-padding: var(--app-scale-2x, 10px) var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);
  padding: var(--tct-input-padding, var(--t-input-padding, var(--comp-default-padding)));
}

.input-field::placeholder,
.placeholder-text {
  color: var(--tct-input-placeholder-font-color, var(--t-input-placeholder-font-color, var(--t-textA, var(--app-gray-d1, rgba(77, 77, 77, 0.77)))));
  font-size: var(--tct-input-placeholder-font-size, var(--t-input-placeholder-font-size, var(--tct-input-font-size, var(--t-input-font-size, var(--app-font-size, inherit)))));
  font-weight: var(--tct-input-placeholder-font-weight, var(--t-input-placeholder-font-weight, var(--tct-input-font-weight, var(--t-input-font-weight, inherit))));
  line-height: var(--tct-input-placeholder-font-size, var(--t-input-placeholder-font-size, var(--tct-input-font-size, var(--t-input-font-size, var(--app-font-size, inherit)))));
  padding: var(--tct-input-placeholder-padding, var(--t-input-placeholder-padding, var(--tct-input-padding, var(--t-input-padding, inherit))));
}

.pseudo-input-container {
  min-width: 0;
  flex: 1;
}

.input-icons-container-left,
.input-icons-container-right {
  --tct-icon-size: var(--tct-input-icon-size, var(--const-px-18, 18px));
  --tct-btn-icon-hover-background: var(--tct-input-btn-hover-background);
  --tct-btn-hover-background: var(--tct-input-btn-hover-background);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--comp-input-horizontal-gap);
}
.input-icons-container-left q2-btn q2-icon,
.input-icons-container-left ::slotted(q2-btn),
.input-icons-container-right q2-btn q2-icon,
.input-icons-container-right ::slotted(q2-btn) {
  --tct-icon-stroke-primary: var(--tct-input-btn-icon-stroke-primary);
  --tct-icon-stroke-secondary: var(--tct-input-btn-icon-stroke-secondary);
}
.input-icons-container-left > div:not(.vertical-separator),
.input-icons-container-right > div:not(.vertical-separator) {
  min-width: var(--tct-input-icon-container-icon-min-width, 44px);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--tct-input-icon-container-font-size, inherit);
}
.input-icons-container-left:empty,
.input-icons-container-right:empty {
  display: var(--tct-input-icon-container-empty-display, block);
}

.input-icons-container-left {
  padding-left: var(--comp-input-horizontal-gap);
}
.input-icons-container-left q2-btn:first-child,
.input-icons-container-left ::slotted(q2-btn:first-child) {
  --tct-btn-icon-border-radius: var(--comp-calc-input-border-top-left-radius) 0 0
      var(--comp-calc-input-border-bottom-left-radius);
}

.input-icons-container-right {
  padding-right: var(--comp-input-horizontal-gap);
  --comp-visibility-toggle-padding: 0px var(--app-scale-2x, 10px);
}
.input-icons-container-right q2-btn:last-child,
.input-icons-container-right ::slotted(q2-btn:last-child) {
  --tct-btn-icon-border-radius: 0 var(--comp-calc-input-border-top-right-radius)
      var(--comp-calc-input-border-bottom-right-radius) 0;
}
.input-icons-container-right .btn-visibility-toggle {
  --tct-btn-height: var(--comp-input-min-height);
  --tct-btn-padding-inline: var(--tct-input-visibility-toggle-padding, var(--app-scale-2x, 10px));
  --tct-btn-font-weight: var(--tct-input-visibility-toggle-font-weight, 400);
  color: var(--tct-input-visibility-toggle-font-color, var(--t-primary, #0079c1));
  font-size: var(--tct-input-visibility-toggle-font-size, var(--app-font-size-small, var(--const-px-12, 12px)));
}

q2-icon {
  margin-top: calc(var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) / 2);
  margin-bottom: calc(var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) / 2);
  pointer-events: none;
  color: var(--tct-input-icon-stroke-primary, var(--t-input-icon-stroke-primary, var(--t-a11y-gray-color, var(--t-textA, var(--app-gray, #747474)))));
  --tct-icon-stroke-primary: var(--tct-input-icon-stroke-primary, var(--t-input-icon-stroke-primary, var(--t-a11y-gray-color, var(--t-textA, var(--app-gray, #747474)))));
  --tct-icon-stroke-secondary: var(--tct-input-icon-stroke-secondary, var(--t-a11y-gray-color, var(--t-textA, var(--app-gray, #747474))));
}

.icon-left-muted {
  opacity: 0.5;
}

.input-prefix,
.input-suffix {
  min-height: var(--comp-input-min-height);
  max-height: var(--comp-input-max-height);
  height: var(--tct-input-height, var(--t-input-height, 44px));
  font-size: var(--tct-input-prefix-font-size, var(--t-input-prefix-font-size, inherit));
  font-weight: var(--tct-input-prefix-font-weight, 400);
  color: var(--tct-input-prefix-font-color, var(--t-input-prefix-font-color, inherit));
  background: var(--tct-input-prefix-background, var(--tct-input-prefix-bg, var(--t-input-prefix-bg, var(--tct-input-background, var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, #f2f2f2))))))));
  transition: color var(--comp-input-tween), background var(--comp-input-tween);
}

.input-prefix {
  border-top-left-radius: var(--comp-calc-input-border-top-left-radius);
  border-bottom-left-radius: var(--comp-calc-input-border-bottom-left-radius);
  pointer-events: none; /* used to allow iOS voiceover to display keyboard in input TCT-1194 */
}

.input-suffix {
  border-top-right-radius: var(--comp-calc-input-border-top-right-radius);
  border-bottom-right-radius: var(--comp-calc-input-border-bottom-right-radius);
}

.icon-error {
  color: var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));
  --tct-icon-stroke-primary: var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));
}

.icon-valid {
  color: var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00));
  --tct-icon-stroke-primary: var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00));
}

.messages-container {
  height: 0px;
  overflow: hidden;
  background: var(--tct-message-background, var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));
  box-shadow: var(--tct-input-message-box-shadow, var(--t-input-message-box-shadow, var(--tct-box-shadow-1, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)))));
  transition: height var(--tct-input-messages-tween, var(--t-input-messages-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));
  margin-top: var(--tct-input-messages-margin-top, 2px);
  z-index: var(--tct-input-messages-z-index, 5);
  position: absolute;
  width: 100%;
  color: var(--tct-input-messages-font-color, var(--t-input-messages-font-color, inherit));
  border-radius: var(--tct-message-border-radius, var(--app-border-radius-1, inherit));
}
.messages-container li:only-child {
  list-style: none;
}

.has-error label {
  color: var(--tct-input-error-label-font-color, var(--t-input-error-label-font-color, var(--tct-input-label-font-color, var(--t-input-label-font-color, inherit))));
}

.has-error:not(.has-focus) .input-prefix,
.has-error:not(.has-focus) .input-suffix {
  color: var(--tct-input-error-prefix-font-color, var(--t-input-error-prefix-font-color, inherit));
  background: var(--tct-input-error-prefix-background, var(--tct-input-error-prefix-bg, var(--t-input-error-prefix-bg, var(--tct-input-background, var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))))))));
}

.icon-left {
  width: 26px;
  height: 26px;
}

.vertical-separator {
  height: calc(var(--comp-input-min-height) - 2px);
  border-right-width: var(--tct-input-prefix-border-width, 1px);
  border-right-style: solid;
  border-right-color: var(--tct-input-prefix-border-color, var(--t-input-prefix-border-color, var(--tct-input-border-color, var(--t-input-border-color, var(--t-a11y-gray-color-AA, #404040)))));
}