:host,
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    :host,
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }:host,
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    :host,
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }:host {
  /**
   * @prop --background: Background color of the input boxes
   *
   * @prop --border-radius: Border radius of the input boxes
   *
   * @prop --border-width: Border width of the input boxes
   * @prop --border-color: Border color of the input boxes
   *
   * @prop --color: Text color of the input
   *
   * @prop --icon-size: Size of the validity icon
   *
   * @prop --min-width: Minimum width of input boxes
   * @prop --height: Height of input boxes
   * @prop --width: Width of input boxes
   * @prop --gap: Gap between input boxes

   * @prop --inline-padding: Horizontal padding surrounding the input boxes

   * @prop --spacing: Spacing between input boxes and description

   * @prop --separator-color: Color of the separator between boxes
   * @prop --separator-width: Width of the separator between boxes
   * @prop --separator-height: Height of the separator between boxes
   * @prop --separator-border-radius: Border radius of the separator between boxes
   *
   * @prop --highlight-color-valid: The color of the highlight on the input when valid
   * @prop --highlight-color-invalid: The color of the highlight on the input when invalid
   */
  --color: initial;
  --min-width: 40px;
  --width: 40px;
  --height: 50px;
  --gap: 8px;
  --icon-size: var(--nano-pictogram-size-small);
  --inline-padding: calc(var(--icon-size) + var(--gap));
  --spacing: var(--nano-spacing-xl);
  --separator-width: 7px;
  --separator-height: 1px;
  --separator-border-radius: 0;
  --separator-color: var(--nano-color-primary-1000);
  --highlight-color-valid: var(--nano-color-success-1100);
  --highlight-color-invalid: var(--nano-color-warning-1100);
  --border-radius: 8px;
  --border-color: var(--nano-color-neutral-700);
  --border-width: 1px;
  display: block;
  position: relative;
  margin-inline: var(--inline-padding);
}

.input-otp-container {
  position: relative;
  inline-size: fit-content;
  block-size: fit-content;
  margin: 0 auto;
}

.input-otp-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
}

.native-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--min-width);
}

.native-input {
  border-radius: var(--border-radius);
  inline-size: var(--width);
  min-inline-size: inherit;
  block-size: var(--height);
  border-width: var(--border-width);
  border-style: solid;
  border-color: var(--border-color);
  background: var(--background);
  color: var(--color);
  font-size: inherit;
  text-align: center;
  appearance: none;
}

.input-otp-description {
  color: currentcolor;
  font-size: var(--nano-font-size-xs);
  line-height: var(--nano-line-height-normal);
  text-align: center;
  position: relative;
  margin-block-start: var(--spacing);
}

.input-otp-description-hidden {
  display: none;
}

.input-otp-separator {
  border-radius: var(--separator-border-radius);
  flex-shrink: 0;
  inline-size: var(--separator-width);
  block-size: var(--separator-height);
  background: var(--separator-color);
}

:host(.input-otp-disabled) .input-otp-description,
:host(.input-otp-disabled) .input-otp-group {
  --color: var(--nano-color-neutral-700);
  opacity: 0.5;
}

:host(.input-otp-disabled),
:host(.input-otp-disabled) .native-input:disabled {
  cursor: not-allowed;
}

:host(.has-focus) .native-input:focus {
  outline: var(--nano-focus-ring);
}

:host(.nano-invalid) .native-input {
  border-color: var(--highlight-color-invalid);
}

:host(.nano-valid) .native-input {
  border-color: var(--highlight-color-valid);
}

.input-otp-icon {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-43%);
  inset-inline-end: calc((var(--gap) + var(--icon-size)) * -1);
  inline-size: var(--icon-size);
  block-size: var(--icon-size);
  display: flex;
  align-items: center;
}
.input-otp-icon--valid {
  color: var(--nano-color-success-1100);
}
.input-otp-icon--invalid {
  color: var(--nano-color-warning-1100);
}