{"version":3,"file":"radioGroup.module.mjs","names":[],"sources":["../../../../package/common/radioGroup/radioGroup.module.pcss"],"sourcesContent":[".radioGroup {\n  /* The base is declared here rather than only on the option, so every em below resolves\n     against the theme's text size instead of whatever the group happens to sit in. At a 16px\n     base these are the 18px dot, 12px row gap and 10px label gap it has always had. */\n  font-size: var(--default-font-size);\n\n  --custom-radio-size: var(--radio-size, 1.125em);\n  --custom-radio-gap: var(--radio-gap, 0.625em);\n\n  user-select: none;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5em;\n  width: fit-content;\n\n  &-groupLabel {\n    color: var(--text-color);\n  }\n\n  &-options {\n    display: flex;\n    flex-direction: column;\n    gap: 0.75em;\n  }\n\n  &-horizontal &-options {\n    flex-flow: row wrap;\n    gap: 1.25em;\n  }\n\n  &-disabled {\n    filter: brightness(0.85);\n    cursor: not-allowed;\n  }\n\n  &-error &-radio:not(.radioGroup-radio-checked) {\n    border-color: var(--error-color);\n  }\n\n  &-option {\n    display: flex;\n    align-items: flex-start;\n    column-gap: var(--custom-radio-gap);\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n    border: 1px solid transparent;\n    border-radius: var(--default-border-radius);\n    margin: -1px;\n    color: var(--text-color);\n    font-family: var(--default-font);\n\n    &:focus-visible {\n      outline: none;\n      border-color: var(--focus-border-color, var(--primary-color));\n    }\n\n    &-disabled {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n  }\n\n  &-radio {\n    flex-shrink: 0;\n    width: var(--custom-radio-size);\n    height: var(--custom-radio-size);\n    border-radius: 50%;\n    border: 0.1125em solid var(--border-color);\n    position: relative;\n    margin-top: 0.0625em;\n    transition: border-color 0.15s;\n\n    &-checked {\n      border-color: var(--primary-color);\n    }\n  }\n\n  &-dot {\n    /* Inset by a transparent border, not centred by flex: border widths snap to whole device\n       pixels, so the gap is equal on every side. A flex-centred 9px dot sat 3.5px into the ring and\n       rendered a pixel off. 0.1875 leaves a dot of about half the ring. */\n    position: absolute;\n    inset: 0;\n    border: calc(var(--custom-radio-size) * 0.1875) solid transparent;\n    border-radius: 50%;\n    background-color: var(--primary-color);\n    background-clip: padding-box;\n    transform: scale(0);\n    transition: transform 0.15s ease;\n\n    &-checked {\n      transform: scale(1);\n    }\n  }\n\n  &-text {\n    display: flex;\n    flex-direction: column;\n    gap: 0.125em;\n  }\n\n  &-label {\n    line-height: 1.2;\n    color: var(--text-color);\n  }\n\n  &-description {\n    font-size: 0.85em;\n    line-height: 1.3;\n    color: var(--text-dark);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .radioGroup-dot {\n    transition: none;\n  }\n}\n"],"mappings":""}