.input-otp {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);

  &:has(:disabled) {
    opacity: 0.5;
  }

  .input-otp-group {
    display: flex;
    align-items: center;

    .input-otp-slot {
      display: flex;
      position: relative;
      align-items: center;
      justify-content: center;
      width: calc(var(--spacing) * 9);
      height: calc(var(--spacing) * 9);
      transition: all var(--default-transition-duration)
        var(--default-transition-timing-function);
      border: 1px solid var(--color-input);
      border-radius: 0;
      outline: none;
      background-color: transparent;
      box-shadow: var(--shadow-xs);
      color: inherit;
      font-size: var(--text-sm);
      line-height: var(--text-sm--line-height);
      border-inline-start-width: 0;

      /* Wrapper */
      & > div {
        display: flex;
        position: absolute;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        inset: 0;

        & > div {
          width: 1px;
          height: calc(var(--spacing) * 4);
          animation: var(--animate-caret-blink);
          background-color: var(--color-foreground);
        }
      }

      /* First input */
      &:first-child {
        border-inline-start-width: 1px;
        border-top-left-radius: var(--radius-md);
        border-bottom-left-radius: var(--radius-md);
      }

      /* Last input */
      &:last-child {
        border-top-right-radius: var(--radius-md);
        border-bottom-right-radius: var(--radius-md);
      }

      /* State */
      &[data-active="true"] {
        &:not([aria-invalid="true"]) {
          border-color: var(--color-ring);
          box-shadow: 0 0 0 3px
            color-mix(in oklab, var(--color-ring) 50%, transparent);
        }

        &[aria-invalid="true"] {
          box-shadow: 0 0 0 3px
            color-mix(in oklab, var(--color-destructive) 20%, transparent);
        }
      }
    }
  }
}

:global(.dark) {
  .input-otp {
    .input-otp-group {
      .input-otp-slot {
        background-color: color-mix(
          in oklab,
          var(--color-input) 30%,
          transparent
        );
      }
    }
  }
}
