{"version":3,"file":"Toggle.module.cjs","names":[],"sources":["../../../../../src/components/Form/Controls/Toggle/Toggle.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  display: grid;\n  inline-size: 2.25rem;\n  block-size: 1.25rem;\n  box-sizing: border-box;\n}\n\n.container > * {\n  grid-area: 1/1;\n  inline-size: inherit;\n  block-size: inherit;\n  box-sizing: inherit;\n}\n\n.container > .input {\n  opacity: 0;\n  margin: 0;\n  cursor: pointer;\n}\n\n.container > .input[disabled] {\n  cursor: not-allowed;\n}\n\n.ui {\n  pointer-events: none;\n  border-radius: var(--cpd-radius-pill-effect);\n  border: 1px solid var(--cpd-color-border-interactive-primary);\n  background: var(--cpd-color-bg-canvas-default);\n  position: relative;\n  padding: 1px;\n  transition-duration: 0.2s;\n  transition-timing-function: ease-in-out;\n  transition-property: background-color, border-color;\n}\n\n.input:checked + .ui {\n  background: var(--cpd-color-bg-accent-rest);\n  border-color: var(--cpd-color-bg-accent-rest);\n}\n\n.ui::after {\n  --dot-color: var(--cpd-color-icon-secondary);\n\n  content: \"\";\n  display: block;\n  block-size: 100%;\n  aspect-ratio: 1 / 1;\n  border-radius: 50%;\n  background: var(--dot-color);\n\n  /* Additional style to ensure visibility in contrast-mode */\n  border: 1px solid var(--dot-color);\n  box-sizing: border-box;\n  transform: translateX(0);\n  transition-duration: 0.2s;\n  transition-timing-function: ease-in-out;\n  transition-property: background-color, transform;\n}\n\n/* Note the use of :focus-visible rather than :focus to avoid showing the focus\nring after a simple click */\n.input:focus-visible + .ui {\n  outline: 2px solid var(--cpd-color-border-focused);\n  outline-offset: 1px;\n}\n\n:checked + .ui::after {\n  --dot-color: var(--cpd-color-icon-on-solid-primary);\n\n  transform: translateX(100%);\n}\n\n@media (hover) {\n  :checked:not([disabled]):hover + .ui {\n    background: var(--cpd-color-bg-accent-hovered);\n    border-color: var(--cpd-color-bg-accent-hovered);\n  }\n}\n\n:checked:active + .ui {\n  background: var(--cpd-color-bg-accent-hovered);\n  border-color: var(--cpd-color-bg-accent-hovered);\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[readonly] + .ui::after {\n  --dot-color: var(--cpd-color-icon-secondary);\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[disabled] + .ui::after {\n  --dot-color: var(--cpd-color-bg-action-primary-disabled);\n}\n\n.input[readonly]:checked + .ui {\n  border-color: var(--cpd-color-icon-secondary);\n  background: var(--cpd-color-icon-secondary);\n}\n\n.input[readonly]:checked + .ui::after {\n  --dot-color: var(--cpd-color-icon-on-solid-primary);\n}\n\n.input[disabled]:checked + .ui {\n  background: var(--cpd-color-bg-action-primary-disabled);\n  border-color: var(--cpd-color-bg-action-primary-disabled);\n}\n\n.input[disabled]:checked + .ui::after {\n  --dot-color: var(--cpd-color-icon-on-solid-primary);\n}\n\n@media (hover) {\n  .input:not(:checked, [disabled], [readonly]):hover + .ui {\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.input:not(:checked, [disabled], [readonly]):active + .ui {\n  border-color: var(--cpd-color-border-interactive-hovered);\n}\n"],"mappings":""}