{"version":3,"file":"checkbox.module.mjs","names":[],"sources":["../../../../package/common/checkbox/checkbox.module.pcss"],"sourcesContent":[".checkbox {\n  --custom-checkbox-size: var(--checkbox-size, 1.375em);\n  --custom-checkbox-gap: var(--checkbox-gap, 0.5em);\n\n  user-select: none;\n  display: flex;\n  align-items: center;\n  column-gap: var(--custom-checkbox-gap);\n  margin: -1px;\n  border: 1px solid transparent;\n  width: fit-content;\n\n  /* The visible checkmark box (below) is nested inside this root, not directly on it — see\n     input.module.pcss for why this variable exists: a wrapping ButtonGroup sets --group-radius-*\n     per corner on the position this occupies, and unlike border-radius itself, custom properties\n     inherit through any nesting depth, reaching descendants a plain ancestor selector can't. */\n  --checkmark-radius: var(--group-radius-tl, var(--default-border-radius))\n    var(--group-radius-tr, var(--default-border-radius)) var(--group-radius-br, var(--default-border-radius))\n    var(--group-radius-bl, var(--default-border-radius));\n\n  &-icon {\n    color: var(--text-on-primary);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 6px;\n    background-color: var(--light-background-color);\n    width: fit-content;\n    height: fit-content;\n  }\n\n  &-loading {\n    background: transparent;\n\n    /* The spinner fills its box, so the box has to carry the checkmark's own size. */\n    &-box {\n      width: var(--custom-checkbox-size);\n      height: var(--custom-checkbox-size);\n    }\n  }\n\n  &-pointer {\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  &:focus-visible {\n    outline: none;\n    border: 1px solid var(--focus-border-color, var(--primary-color));\n    border-radius: 6px;\n  }\n\n  &-disabled {\n    filter: brightness(0.8);\n    cursor: not-allowed;\n  }\n\n  &-checkmark {\n    width: var(--custom-checkbox-size);\n    height: var(--custom-checkbox-size);\n    border: 0.1125em solid var(--border-color);\n    border-radius: var(--checkmark-radius);\n    position: relative;\n\n    /* The mark only. The fill is the box's own background below, which is what keeps the\n       checked and empty states the same size: an svg sized to be the fill sat proud of it. */\n    svg {\n      position: absolute;\n      inset: 0;\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      padding: 0.125em;\n      stroke: var(--text-on-primary);\n      transition: transform 0.1s;\n      transform: scale(0);\n    }\n\n    /* Tick and dash are two paths, so a dash leaves as a dash rather than as a tick. One leaves in a\n       single step at 0.1s, the svg's own scale time, so it has scaled away on an uncheck, and the\n       other starts drawing at that moment on a switch: erasing it gradually crossed the two. */\n    path {\n      stroke-dasharray: 5;\n      stroke-dashoffset: 5;\n      transition: stroke-dashoffset 0s 0.1s;\n    }\n\n    &-checked,\n    &-indeterminate {\n      background: var(--checkbox-fill, var(--primary-color));\n      border-color: var(--checkbox-fill, var(--primary-color));\n\n      svg {\n        transform: scale(1);\n      }\n    }\n\n    &-checked .checkbox-tick,\n    &-indeterminate .checkbox-dash {\n      stroke-dashoffset: 0;\n      transition: stroke-dashoffset 0.25s 0.1s;\n    }\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .checkbox-checkmark svg,\n  .checkbox-checkmark path {\n    transition: none;\n  }\n}\n"],"mappings":""}