{"version":3,"file":"otpInput.module.mjs","names":[],"sources":["../../../../package/common/otpInput/otpInput.module.pcss"],"sourcesContent":["@keyframes otpInputShake {\n  10%,\n  90% {\n    transform: translateX(-1px);\n  }\n\n  20%,\n  80% {\n    transform: translateX(2px);\n  }\n\n  30%,\n  50%,\n  70% {\n    transform: translateX(-4px);\n  }\n\n  40%,\n  60% {\n    transform: translateX(4px);\n  }\n}\n\n.otpInput {\n  display: inline-flex;\n  flex-direction: column;\n  row-gap: 0.5em;\n\n  /* With the min-widths below, the boxes shrink into a container narrower than their full width\n     instead of running out of it. */\n  max-width: 100%;\n\n  &-label {\n    font-size: var(--default-font-size);\n    color: var(--text-color);\n  }\n\n  &-requiredMark {\n    color: var(--required-mark-color, var(--error-color));\n  }\n\n  /* As wide as the boxes even when the root stretches, so the error tooltip anchored here points\n     at them. */\n  &-boxes {\n    display: flex;\n    align-self: flex-start;\n    align-items: center;\n    max-width: 100%;\n    column-gap: 0.5em;\n\n    &-shake {\n      animation: otpInputShake 0.4s ease-in-out;\n\n      @media (prefers-reduced-motion: reduce) {\n        animation: none;\n      }\n    }\n  }\n\n  &-boxWrapper {\n    display: flex;\n    align-items: center;\n    column-gap: 0.5em;\n    min-width: 0;\n  }\n\n  /* These em are against this box's OWN 1.25em font, not the root's: 40px and 48px of 20px. */\n  &-box {\n    width: 2em;\n    min-width: 1.4em;\n    height: 2.4em;\n    text-align: center;\n    font-size: 1.25em;\n    font-weight: 600;\n    font-family: var(--themed-font, inherit);\n    color: var(--text-color);\n    background: var(--input-background, var(--background));\n    border: 0.075em solid var(--border-color);\n    border-radius: var(--default-border-radius);\n    outline: none;\n    transition:\n      border-color 0.15s,\n      box-shadow 0.15s;\n\n    &:focus {\n      border-color: var(--focus-border-color, var(--primary-color));\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-border-color, var(--primary-color)) 20%, transparent);\n    }\n\n    &-filled {\n      border-color: var(--primary-lighter, var(--border-color));\n    }\n\n    &-error {\n      border-color: var(--error-color);\n\n      &:focus {\n        border-color: var(--error-color);\n        box-shadow: 0 0 0 3px color-mix(in srgb, var(--error-color) 20%, transparent);\n      }\n    }\n\n    &:disabled {\n      color: var(--disabled-font-color);\n      background: var(--disabled-input-color);\n      cursor: not-allowed;\n    }\n  }\n\n  &-separator {\n    width: 0.625em;\n    height: calc(1.5em / 16);\n    background: var(--border-color);\n    flex-shrink: 0;\n  }\n\n  &-disabled &-label {\n    color: var(--disabled-font-color);\n  }\n}\n"],"mappings":""}