{"version":3,"file":"Checkbox.module.cjs","names":[],"sources":["../../../../../src/components/Form/Controls/Checkbox/Checkbox.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  --size: 20px;\n\n  display: grid;\n  inline-size: var(--size);\n  block-size: var(--size);\n}\n\n.input,\n.ui {\n  box-sizing: border-box;\n  grid-area: 1/1;\n  inline-size: var(--size);\n  block-size: var(--size);\n}\n\n.input {\n  opacity: 0;\n  margin: 0;\n  cursor: pointer;\n}\n\n.ui {\n  pointer-events: none;\n  border-radius: 4px; /* TODO: Ought to be a token */\n  border: 1px solid;\n  border-color: var(--cpd-color-border-interactive-primary);\n}\n\n.ui svg {\n  inline-size: var(--size);\n  block-size: var(--size);\n\n  /* compensate for the parent border */\n  margin: -1px;\n\n  /** Default, rest state */\n  color: transparent;\n}\n\n.input:checked + .ui {\n  background-color: var(--cpd-color-bg-accent-rest);\n  border-color: var(--cpd-color-bg-accent-rest);\n}\n\n.input:checked + .ui svg {\n  color: var(--cpd-color-icon-on-solid-primary);\n}\n\n.input:focus-visible + .ui {\n  outline: 2px solid var(--cpd-color-border-focused);\n  outline-offset: 1px;\n}\n\n.input[disabled] {\n  cursor: not-allowed;\n}\n\n.input[disabled] + .ui {\n  border-color: var(--cpd-color-border-disabled);\n  background: var(--cpd-color-bg-canvas-disabled);\n}\n\n.input[readonly] {\n  pointer-events: none;\n}\n\n.input[readonly] + .ui {\n  border-color: var(--cpd-color-border-interactive-secondary);\n  background: var(--cpd-color-bg-subtle-secondary);\n}\n\n.input[disabled]:checked + .ui {\n  border-color: var(--cpd-color-bg-action-primary-disabled);\n  background: var(--cpd-color-bg-action-primary-disabled);\n}\n\n.input[readonly]:checked + .ui svg {\n  color: var(--cpd-color-icon-secondary);\n}\n\n@media (hover) {\n  .input:not([disabled], [readonly], :checked):hover + .ui {\n    border-color: var(--cpd-color-bg-accent-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  .input:not([disabled], [readonly], :checked):hover + .ui svg {\n    color: var(--cpd-color-icon-quaternary);\n  }\n\n  .input:not([disabled], [readonly]):checked:hover + .ui {\n    border-color: var(--cpd-color-bg-accent-hovered);\n    background: var(--cpd-color-bg-accent-hovered);\n  }\n\n  .input[data-invalid]:not([disabled], [readonly]):checked:hover + .ui {\n    border-color: var(--cpd-color-bg-critical-hovered);\n    background: var(--cpd-color-bg-critical-hovered);\n  }\n}\n\n.input[data-invalid]:not([disabled], :checked, [readonly]) + .ui {\n  border-color: var(--cpd-color-border-critical-primary);\n}\n\n.input[data-invalid]:not([disabled], [readonly]):checked + .ui {\n  background-color: var(--cpd-color-bg-critical-primary);\n  border-color: var(--cpd-color-bg-critical-primary);\n}\n"],"mappings":""}