{"version":3,"file":"form.module.cjs","names":[],"sources":["../../../src/components/Form/form.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/* Styling the Radix UI Form component */\n\n/**\n * ROOT: Form Element\n */\n\n.root {\n  display: flex;\n  flex-direction: column;\n  gap: var(--cpd-space-5x);\n}\n\n/**\n * FIELD: Wrapper around label, control and message\n */\n\n.field {\n  display: flex;\n  flex-direction: column;\n  gap: var(--cpd-space-1x);\n}\n\n.inline-field {\n  display: flex;\n  flex-direction: row;\n  gap: var(--cpd-space-2x);\n}\n\n.inline-field-body {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n}\n\n.inline-field-control {\n  /* The control should have the same height as the label */\n  block-size: calc(\n    var(--cpd-font-size-body-md) * var(--cpd-font-line-height-regular)\n  );\n\n  /* Align the control in the middle of the label */\n  display: flex;\n  align-items: center;\n}\n\n/**\n * LABEL\n */\n\n.label {\n  font: var(--cpd-font-body-md-medium);\n  letter-spacing: var(--cpd-font-letter-spacing-body-md);\n}\n\n.label[for] {\n  cursor: pointer;\n}\n\n.label[data-invalid] {\n  color: var(--cpd-color-text-critical-primary);\n}\n\n/* Currently working everywhere but on Firefox (only behind a labs flag)\nhttps://developer.mozilla.org/en-US/docs/Web/CSS/:has#browser_compatibility */\n.label:has(~ * input[disabled]),\n.label:has(~ input[disabled]),\n.inline-field-control:has(input[disabled]) ~ .inline-field-body .label {\n  color: var(--cpd-color-text-disabled);\n  cursor: not-allowed;\n}\n\n/**\n * Help and error messages\n */\n\n.message {\n  font: var(--cpd-font-body-sm-regular);\n  letter-spacing: var(--cpd-font-letter-spacing-body-sm);\n  margin-block-start: var(--cpd-space-1x);\n}\n\n.help-message {\n  color: var(--cpd-color-text-secondary);\n}\n\n.error-message {\n  color: var(--cpd-color-text-critical-primary);\n}\n\n.success-message {\n  color: var(--cpd-color-text-success-primary);\n}\n\n/* Currently working everywhere but on Firefox (only behind a labs flag)\nhttps://developer.mozilla.org/en-US/docs/Web/CSS/:has#browser_compatibility */\ninput[disabled] ~ .message,\n*:has(input[disabled]) ~ .message,\n.inline-field-control:has(input[disabled]) ~ .inline-field-body .message {\n  color: var(--cpd-color-text-disabled);\n}\n\n.message > svg {\n  display: inline-block;\n  vertical-align: bottom;\n  margin-inline-end: var(--cpd-space-2x);\n\n  /* Calculate the size of the icon based on the font size and line height */\n  block-size: calc(1em * var(--cpd-font-line-height-regular));\n  inline-size: calc(1em * var(--cpd-font-line-height-regular));\n}\n"],"mappings":""}