{"version":3,"file":"MFA.module.cjs","names":[],"sources":["../../../../../src/components/Form/Controls/MFA/MFA.module.css"],"sourcesContent":["/*\nCopyright 2025 New Vector Ltd.\nCopyright 2023 The Matrix.org Foundation C.I.C.\nCopyright 2023 New Vector Ltd\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\n.container {\n  --gap: var(--cpd-space-3x);\n  --digit-size: var(--cpd-space-10x);\n  --digit-height: var(--cpd-space-12x);\n\n  display: flex;\n  inline-size: fit-content;\n  flex-direction: row;\n  gap: var(--gap);\n\n  /* The input is positioned absolutely\n     so the container needs to be positioned relatively */\n  position: relative;\n}\n\n.control {\n  all: unset;\n\n  /** TODO: semantic token */\n  font-family: var(--cpd-font-family-mono), ui-monospace, monospace;\n  font-weight: 700;\n\n  /* Position the input to fill the container */\n  position: absolute;\n  inset: 0;\n\n  /* Spacing between digits is set to the gap\n     plus the size of one digit box\n     minus the size of one character */\n  letter-spacing: calc(var(--gap) + var(--digit-size) - 1ch);\n  line-height: var(--digit-height);\n\n  /* The padding at the start positions the first digit at the middle of the digit box */\n  padding-inline-start: calc(var(--cpd-space-10x) / 2 - (1ch / 2));\n\n  /* The negative margin at the end is to keep space for the cursor when the input is full */\n  margin-inline-end: calc(-1 * (var(--cpd-space-10x) + var(--cpd-space-3x)));\n}\n\n.digit {\n  box-sizing: border-box;\n  inline-size: var(--cpd-space-10x);\n  block-size: var(--cpd-space-12x);\n  border: 1px solid var(--cpd-color-border-interactive-primary);\n  background: var(--cpd-color-bg-canvas-default);\n  border-radius: 0.5rem;\n  padding: var(--cpd-space-3x) var(--cpd-space-4x);\n}\n\n@media (hover) {\n  .control:hover ~ .digit {\n    border-color: var(--cpd-color-border-interactive-hovered);\n\n    /** TODO: have the shadow in the design tokens */\n    box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);\n  }\n}\n\n.control:disabled {\n  color: var(--cpd-color-text-disabled);\n  cursor: not-allowed;\n}\n\n.control:disabled ~ .digit {\n  box-shadow: none;\n  background: var(--cpd-color-bg-canvas-disabled);\n  border-color: var(--cpd-color-border-disabled);\n}\n\n.control[readonly] {\n  color: var(--cpd-color-text-secondary);\n}\n\n.control[readonly] ~ .digit {\n  box-shadow: none;\n  background: var(--cpd-color-bg-subtle-secondary);\n  border-color: var(--cpd-color-bg-subtle-secondary);\n}\n\n.control[data-invalid] ~ .digit {\n  border-color: var(--cpd-color-text-critical-primary);\n}\n\n.control:focus ~ .digit:not([data-filled]) {\n  outline: 2px solid var(--cpd-color-border-focused);\n  border-color: transparent;\n}\n\n.digit[data-selected] {\n  border-color: var(--cpd-color-border-focused);\n  background-color: var(--cpd-color-bg-info-subtle);\n}\n"],"mappings":""}