* {
  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-otp-margin?: (<length-percentage>+) Controls the margin of the component host as a shorthand. Overrides --tct-otp-margin-top and --tct-otp-margin-bottom when set.
 * @prop --tct-otp-margin-top: (<length-percentage>) Controls the top margin of the component host.
 * @prop --tct-otp-margin-bottom: (<length-percentage>) Controls the bottom margin of the component host.
 * @prop --tct-otp-vertical-gap: (<length-percentage>) Controls the vertical spacing between the label, fields, helper text, and actions.
 * @prop --tct-otp-field-gap: (<length-percentage>) Controls the horizontal spacing between individual OTP fields.
 * @prop --tct-otp-field-background: (<color>) Controls the background color of each OTP input field.
 * @prop --tct-otp-field-border-color: (<color>) Controls the border color of each OTP input field.
 * @prop --tct-otp-field-border-radius: (<length-percentage>) Controls the corner radius of each OTP input field.
 * @prop --tct-otp-field-border-width: (<length>) Controls the border width of each OTP input field.
 * @prop --tct-otp-field-font-color: (<color>) Controls the text color inside each OTP input field.
 * @prop --tct-otp-field-font-size: (<length-percentage>) Controls the font size of characters inside each OTP input field.
 * @prop --tct-otp-field-font-weight: (<number>) Controls the font weight of characters inside each OTP input field.
 * @prop --tct-otp-field-masked-color: (<color>) Controls the color of the mask dot shown when the field is in masked mode.
 * @prop --tct-otp-field-masked-size: (<length>) Controls the diameter of the mask dot shown when the field is in masked mode.
 * @prop --tct-otp-field-focus-border-color?: (<color>) Controls the border color of the active (focused) OTP field. Defaults to the regular field border color.
 * @prop --tct-otp-field-focus-box-shadow: (*) Controls the box-shadow applied to the active (focused) OTP field.
 * @prop --tct-otp-field-error-border-color: (<color>) Controls the border color of each OTP field when the component is in the error state.
 * @prop --tct-otp-field-error-focus-ring-color: (<color>) Controls the focus ring color of the active field when the component is in the error state.
 * @prop --tct-otp-field-error-focus-box-shadow: (*) Controls the box-shadow of the active field when the component is in the error state.
 * @prop --tct-otp-field-success-border-color: (<color>) Controls the border color of each OTP field when the component is in the success state.
 * @prop --tct-otp-field-success-focus-ring-color: (<color>) Controls the focus ring color of the active field when the component is in the success state.
 * @prop --tct-otp-field-success-focus-box-shadow: (*) Controls the box-shadow of the active field when the component is in the success state.
 * @prop --tct-otp-field-disabled-opacity: (<number>) Controls the opacity of each OTP field when the component is disabled.
 * @prop --tct-otp-separator-color: (<color>) Controls the color of the separator character between field groups.
 * @prop --tct-otp-separator-font-size: (<length-percentage>) Controls the font size of the separator character.
 * @prop --tct-otp-separator-font-weight: (<number>) Controls the font weight of the separator character.
 * @prop --tct-otp-helper-font-color: (<color>) Controls the color of the helper text below the fields.
 * @prop --tct-otp-helper-font-size: (<length-percentage>) Controls the font size of the helper text below the fields.
 * @prop --tct-otp-processing-overlay-background: (<color>) Controls the background of the overlay shown during processing.
 * @prop --tct-otp-processing-spinner-size: (<length>) Controls the size of the spinner shown during processing.
 * @prop --tct-otp-tween: (*) Controls the transition timing applied to field state changes.
 */
:host {
  display: flex;
  justify-content: center;
  margin: var(--tct-otp-margin, var(--tct-otp-margin-top, var(--app-scale-5x, 25px)) 0 var(--tct-otp-margin-bottom, var(--app-scale-5x, 25px)));
  font-size: var(--tct-input-font-size, var(--app-font-size, inherit));
}

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

.otp-container {
  --comp-otp-tween: var(--tct-otp-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)));
  --comp-otp-vertical-gap: var(--tct-otp-vertical-gap, var(--app-scale-4x, 20px));
  --comp-otp-field-size: 44px;
  --comp-otp-field-gap: var(--tct-otp-field-gap, var(--app-scale-2x, 10px));
  --comp-otp-field-background: var(--tct-otp-field-background, var(--t-base, #ffffff));
  --comp-otp-field-border-color: var(--tct-otp-field-border-color, var(--t-a11y-gray-color-AA, #404040));
  --comp-otp-field-border-radius: var(--tct-otp-field-border-radius, var(--tct-border-radius-2, var(--app-border-radius-2, 8px)));
  --comp-otp-field-border-width: var(--tct-otp-field-border-width, 1px);
  --comp-otp-field-font-color: var(--tct-otp-field-font-color, var(--t-text, inherit));
  --comp-otp-field-font-size: var(--tct-otp-field-font-size, var(--app-font-size, var(--const-px-16, 16px)));
  --comp-otp-field-masked-color: var(--tct-otp-field-masked-color, var(--tct-otp-field-font-color, var(--t-text, #1f1f1f)));
  --comp-otp-field-masked-size: var(--tct-otp-field-masked-size, var(--tct-otp-field-masked-font-size, var(--const-px-8, 8px)));
  --comp-otp-field-font-weight: var(--tct-otp-field-font-weight, 400);
  --comp-otp-field-focus-box-shadow: var(--tct-otp-field-focus-box-shadow, var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc));
  --comp-otp-field-error-border-color: var(--tct-otp-field-error-border-color, var(--const-stoplight-alert, #c30000));
  --comp-otp-field-error-focus-ring-color: var(--tct-otp-field-error-focus-ring-color, #c30000);
  --comp-otp-field-error-focus-box-shadow: var(--tct-otp-field-error-focus-box-shadow, 0 0 0 2px #ffffff, 0 0 0 4px var(--comp-otp-field-error-focus-ring-color));
  --comp-otp-field-success-border-color: var(--tct-otp-field-success-border-color, var(--const-stoplight-success, #0e8a00));
  --comp-otp-field-success-focus-ring-color: var(--tct-otp-field-success-focus-ring-color, #0e8a00);
  --comp-otp-field-success-focus-box-shadow: var(--tct-otp-field-success-focus-box-shadow, 0 0 0 2px #ffffff, 0 0 0 4px var(--comp-otp-field-success-focus-ring-color));
  --comp-otp-field-disabled-opacity: var(--tct-otp-field-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)));
  --comp-otp-separator-color: var(--tct-otp-separator-color, var(--t-textA, var(--t-a11y-gray-color, #4d4d4d)));
  --comp-otp-separator-font-size: var(--tct-otp-separator-font-size, var(--const-px-20, 20px));
  --comp-otp-separator-font-weight: var(--tct-otp-separator-font-weight, 600);
  align-items: center;
  display: inline-flex;
  flex-direction: column;
  gap: var(--comp-otp-vertical-gap);
  max-width: 100%;
}

.otp-label {
  display: block;
  color: var(--tct-input-label-font-color, inherit);
  font-size: var(--tct-input-label-font-size, inherit);
  font-weight: var(--tct-input-label-font-weight, 600);
  letter-spacing: var(--tct-input-label-letter-spacing, inherit);
  line-height: var(--tct-input-label-line-height, inherit);
  text-align: center;
  text-transform: var(--tct-input-label-text-transform, none);
  transition: color var(--comp-otp-tween);
  width: 100%;
}

.helper-text {
  color: var(--tct-otp-helper-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77))));
  font-size: var(--tct-otp-helper-font-size, var(--app-font-size-small, var(--const-px-12, 12px)));
  text-align: center;
}

.otp-content {
  align-items: center;
  display: inline-flex;
  flex-direction: column;
  gap: var(--comp-otp-vertical-gap);
  max-width: 100%;
}

.send-code-hidden {
  clip: rect(0, 0, 0, 0);
  height: 1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

.otp-control-group {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: var(--comp-otp-vertical-gap);
  max-width: 100%;
  width: max-content;
}

.fields-container {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--comp-otp-field-gap);
  justify-content: center;
  pointer-events: none;
  position: relative;
  width: max-content;
}

.fields-shell {
  max-width: 100%;
  padding: 4px;
  position: relative;
  width: max-content;
}

.otp-hidden-input {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  caret-color: transparent;
  color: transparent;
  cursor: text;
  /* stylelint-disable-next-line tecton/require-t-px-fallback */
  font-size: 16px;
  height: 100%;
  inset: 0;
  margin: 0;
  opacity: 1;
  outline: none;
  padding: 0;
  pointer-events: auto;
  position: absolute;
  width: 100%;
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-fill-color: transparent;
}
.otp-hidden-input::selection {
  background: transparent;
  color: transparent;
}
.otp-hidden-input:focus, .otp-hidden-input:focus-visible {
  outline: none;
  box-shadow: none;
}
.otp-hidden-input:disabled {
  cursor: not-allowed;
}

.otp-slot {
  align-items: center;
  background: var(--comp-otp-field-background);
  border-color: var(--comp-otp-field-border-color);
  border-radius: var(--comp-otp-field-border-radius);
  border-style: solid;
  border-width: var(--comp-otp-field-border-width);
  box-sizing: border-box;
  color: var(--comp-otp-field-font-color);
  display: flex;
  flex: 0 0 var(--comp-otp-field-size);
  height: var(--comp-otp-field-size);
  justify-content: center;
  position: relative;
  transition: border-color var(--comp-otp-tween), box-shadow var(--comp-otp-tween), opacity var(--comp-otp-tween);
  width: var(--comp-otp-field-size);
}
.otp-slot.is-active {
  border-color: var(--tct-otp-field-focus-border-color, var(--comp-otp-field-border-color));
  box-shadow: var(--comp-otp-field-focus-box-shadow);
}
.otp-slot .otp-caret {
  animation: otp-caret-blink 1s step-end infinite;
  background: currentColor;
  display: block;
  height: 50%;
  pointer-events: none;
  width: 2px;
}
.state-error .otp-slot {
  border-color: var(--comp-otp-field-error-border-color);
}
.state-error .otp-slot.is-active {
  box-shadow: var(--comp-otp-field-error-focus-box-shadow);
}
.state-success .otp-slot {
  border-color: var(--comp-otp-field-success-border-color);
}
.state-success .otp-slot.is-active {
  box-shadow: var(--comp-otp-field-success-focus-box-shadow);
}

:host([disabled]) .otp-slot {
  opacity: var(--comp-otp-field-disabled-opacity);
}

:host([disabled]) .otp-hidden-input {
  cursor: not-allowed;
}

@keyframes otp-caret-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
.otp-char {
  color: var(--comp-otp-field-font-color);
  font-family: inherit;
  font-size: var(--comp-otp-field-font-size);
  font-weight: var(--comp-otp-field-font-weight);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.otp-dot {
  background: var(--comp-otp-field-masked-color);
  border-radius: 50%;
  display: block;
  height: var(--comp-otp-field-masked-size);
  pointer-events: none;
  width: var(--comp-otp-field-masked-size);
}

.otp-separator {
  color: var(--comp-otp-separator-color);
  font-size: var(--comp-otp-separator-font-size);
  font-weight: var(--comp-otp-separator-font-weight);
}

.submit-button {
  width: 100%;
}

.processing-overlay {
  align-items: center;
  background: var(--tct-otp-processing-overlay-background, rgba(255, 255, 255, 0.72));
  border-radius: var(--comp-otp-field-border-radius);
  display: flex;
  inset: 0;
  justify-content: center;
  pointer-events: auto;
  position: absolute;
  --tct-loading-spinner-size: var(--tct-otp-processing-spinner-size, 32px);
  z-index: 1;
}

.otp-message {
  margin: 0;
  text-align: center;
  width: 100%;
}