{"version":3,"file":"Switch.module.cjs","names":[],"sources":["../../../src/components/Switch/Switch.module.css"],"sourcesContent":["/*\nCopyright 2026 Element Creations Ltd.\nCopyright 2023, 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE in the repository root for full details.\n*/\n\n.toggle {\n  &[data-size=\"lg\"] {\n    --cpd-switch-button-size: 44px;\n    --cpd-switch-icon-size: 24px;\n  }\n\n  &[data-size=\"md\"] {\n    --cpd-switch-button-size: 32px;\n    --cpd-switch-icon-size: 20px;\n  }\n\n  padding: var(--cpd-space-0-5x);\n  border-radius: var(--cpd-radius-pill-effect);\n  background: var(--cpd-color-bg-canvas-default);\n  display: flex;\n  position: relative;\n  inline-size: fit-content;\n  border: 1px solid var(--cpd-color-border-interactive-secondary);\n\n  @media (forced-colors) {\n    /* Firefox seems to lose borders in practice (https://github.com/element-hq/compound-web/pull/482#discussion_r3136544962) so redefine this here. */\n    border: 1px solid;\n  }\n\n  svg {\n    display: block;\n    position: absolute;\n    pointer-events: none;\n    color: var(--cpd-color-icon-primary);\n    transition: color 0.1s;\n    inline-size: var(--cpd-switch-icon-size);\n    block-size: var(--cpd-switch-icon-size);\n    margin-block-start: calc(\n      (var(--cpd-switch-button-size) - var(--cpd-switch-icon-size)) / 2\n    );\n  }\n\n  svg:nth-child(2) {\n    inset-inline-start: var(--cpd-space-0-5x);\n    margin-inline-start: calc(\n      (var(--cpd-switch-button-size) - var(--cpd-switch-icon-size)) / 2\n    );\n  }\n\n  svg:nth-child(4) {\n    inset-inline-end: var(--cpd-space-0-5x);\n    margin-inline-end: calc(\n      (var(--cpd-switch-button-size) - var(--cpd-switch-icon-size)) / 2\n    );\n  }\n\n  input {\n    appearance: none;\n\n    /* Safari puts a margin on these, which is not removed via appearance: none */\n    margin: 0;\n    block-size: var(--cpd-switch-button-size);\n    inline-size: var(--cpd-switch-button-size);\n    cursor: pointer;\n    border-radius: var(--cpd-radius-pill-effect);\n    background: var(--cpd-color-bg-action-secondary-rest);\n    box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);\n    transition: background-color 0.1s;\n    border: 1px solid var(--cpd-color-border-interactive-secondary);\n  }\n\n  input:first-child {\n    margin-inline-end: 5px;\n  }\n\n  @media (hover: hover) {\n    input:hover {\n      border-color: var(--cpd-color-border-interactive-primary);\n      background: var(--cpd-color-bg-action-secondary-hovered);\n      box-shadow: none;\n    }\n\n    input:checked:hover {\n      background: var(--cpd-color-bg-action-primary-hovered);\n    }\n  }\n\n  input:active {\n    background: var(--cpd-color-bg-action-secondary-pressed);\n    box-shadow: none;\n  }\n\n  input:checked {\n    border: unset;\n    background: var(--cpd-color-bg-action-primary-rest);\n\n    @media (forced-colors) {\n      border: 3px solid;\n    }\n  }\n\n  input:checked + svg {\n    color: var(--cpd-color-icon-on-solid-primary);\n  }\n\n  input:checked:active {\n    background: var(--cpd-color-bg-action-primary-pressed);\n  }\n}\n"],"mappings":""}