@swisspost/design-system-styles 9.0.0-next.5 → 9.0.0-next.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (139) hide show
  1. package/basics.css +3 -1
  2. package/cargo-external.css +7 -0
  3. package/cargo-external.scss +8 -0
  4. package/cargo-internal.css +7 -0
  5. package/cargo-internal.scss +8 -0
  6. package/cargo-tokens-external.css +1 -0
  7. package/cargo-tokens-external.scss +8 -0
  8. package/cargo-tokens-internal.css +1 -0
  9. package/cargo-tokens-internal.scss +8 -0
  10. package/components/_form-check.scss +170 -0
  11. package/components/_index.scss +6 -2
  12. package/components/banner.css +1 -0
  13. package/components/banner.scss +107 -0
  14. package/components/blockquote.css +1 -0
  15. package/components/blockquote.scss +46 -0
  16. package/components/breadcrumb.css +1 -1
  17. package/components/card-control.css +1 -1
  18. package/components/card-control.scss +12 -7
  19. package/components/card.css +1 -1
  20. package/components/card.scss +1 -5
  21. package/components/carousel.css +1 -1
  22. package/components/carousel.scss +2 -11
  23. package/components/checkbox.css +1 -0
  24. package/components/checkbox.scss +127 -0
  25. package/components/chip.css +1 -1
  26. package/components/close.css +1 -1
  27. package/components/datatable.css +1 -3
  28. package/components/dialog.css +1 -1
  29. package/components/dialog.scss +1 -1
  30. package/components/dropdown.css +1 -1
  31. package/components/floating-label.css +1 -1
  32. package/components/floating-label.scss +84 -251
  33. package/components/form-hint.css +1 -0
  34. package/components/form-hint.scss +16 -0
  35. package/components/form-range.css +1 -1
  36. package/components/form-range.scss +1 -1
  37. package/components/form-select.css +1 -1
  38. package/components/form-select.scss +224 -54
  39. package/components/form-validation.css +1 -1
  40. package/components/form-validation.scss +0 -31
  41. package/components/forms.css +1 -1
  42. package/components/forms.scss +96 -94
  43. package/components/grid.css +1 -1
  44. package/components/intranet-header/_nav-overflow.scss +2 -2
  45. package/components/intranet-header/_scaffolding.scss +1 -1
  46. package/components/intranet-header/_searchbox.scss +1 -1
  47. package/components/intranet-header/_top-navigation.scss +1 -1
  48. package/components/modal.css +2 -2
  49. package/components/offcanvas.css +1 -1
  50. package/components/product-card.css +1 -1
  51. package/components/radio-button.css +1 -0
  52. package/components/radio-button.scss +117 -0
  53. package/components/sizing.css +1 -1
  54. package/components/stepper.css +1 -1
  55. package/components/stepper.scss +3 -2
  56. package/components/subnavigation.css +1 -1
  57. package/components/switch.css +1 -0
  58. package/components/switch.scss +223 -0
  59. package/components/tables.css +1 -1
  60. package/components/tabs/_tabs-wrapper.scss +2 -1
  61. package/components/tabs/index.css +1 -1
  62. package/components/timepicker.scss +5 -2
  63. package/components/toast.css +1 -1
  64. package/components/toast.scss +20 -15
  65. package/elements/_index.scss +1 -0
  66. package/elements/list-bullet.css +1 -1
  67. package/elements/list-bullet.scss +2 -0
  68. package/elements/reset.css +1 -1
  69. package/elements/reset.scss +6 -0
  70. package/elements/segmented-button.css +3 -0
  71. package/elements/segmented-button.scss +187 -0
  72. package/elements.css +3 -1
  73. package/functions/_forms.scss +8 -3
  74. package/index.css +4 -4
  75. package/intranet.css +4 -4
  76. package/layouts/portal/_grid.scss +0 -20
  77. package/mixins/_forms.scss +27 -32
  78. package/mixins/_notification.scss +40 -27
  79. package/mixins/_utilities.scss +7 -18
  80. package/package.json +3 -3
  81. package/palettes/_mixins.scss +74 -0
  82. package/palettes/_utilities.scss +3 -0
  83. package/palettes/_variables.scss +2 -0
  84. package/palettes/cargo-palettes.css +1 -0
  85. package/palettes/cargo-palettes.scss +3 -0
  86. package/palettes/post-palettes.css +1 -0
  87. package/palettes/post-palettes.scss +3 -0
  88. package/placeholders/_close.scss +1 -4
  89. package/post-external.css +4 -4
  90. package/post-external.scss +5 -1
  91. package/post-internal.css +4 -4
  92. package/post-internal.scss +5 -1
  93. package/post-tokens-external.css +1 -1
  94. package/post-tokens-internal.css +1 -1
  95. package/themes/bootstrap/_forms.scss +0 -4
  96. package/themes/bootstrap/_overrides-variables.scss +0 -1
  97. package/themes/bootstrap/_utilities.scss +4 -0
  98. package/tokens/_cargo-theme.scss +8 -0
  99. package/tokens/_palettes.scss +9 -0
  100. package/tokens/temp/_channel.scss +1 -1
  101. package/tokens/temp/_components.scss +35 -27
  102. package/tokens/temp/_core.scss +2 -1
  103. package/tokens/temp/_device.scss +3 -3
  104. package/tokens/temp/_elements.scss +1 -1
  105. package/tokens/temp/_helpers.scss +1 -1
  106. package/tokens/temp/_index.scss +1 -1
  107. package/tokens/temp/_palettes.scss +1 -1
  108. package/tokens/temp/_scheme.scss +1 -1
  109. package/tokens/temp/_theme.scss +1 -1
  110. package/tokens/temp/_utilities.scss +1 -1
  111. package/tokens/temp/palettes/_cargo-dark.scss +19 -0
  112. package/tokens/temp/palettes/_cargo-light.scss +19 -0
  113. package/tokens/temp/palettes/_post-dark.scss +19 -0
  114. package/tokens/temp/palettes/_post-light.scss +19 -0
  115. package/utilities/_variables.scss +12 -0
  116. package/utilities/temp/_legacy.scss +1 -1
  117. package/variables/_breakpoints.scss +1 -5
  118. package/variables/_color.scss +0 -27
  119. package/variables/_grid.scss +2 -12
  120. package/variables/_spacing.scss +0 -8
  121. package/variables/_type.scss +0 -8
  122. package/variables/components/_close.scss +2 -2
  123. package/variables/components/_form-check.scss +0 -41
  124. package/variables/components/_forms.scss +8 -83
  125. package/variables/components/_index.scss +0 -1
  126. package/variables/components/_notification.scss +43 -36
  127. package/components/alert.css +0 -1
  128. package/components/alert.scss +0 -133
  129. package/components/form-check.css +0 -1
  130. package/components/form-check.scss +0 -297
  131. package/components/topic-teaser.css +0 -1
  132. package/components/topic-teaser.scss +0 -196
  133. package/layouts/portal/_variables.scss +0 -8
  134. package/themes/bootstrap/forms/_floating-labels.scss +0 -2
  135. package/themes/bootstrap/forms/_form-control.scss +0 -2
  136. package/themes/bootstrap/forms/_form-select.scss +0 -2
  137. package/themes/bootstrap/forms/_form-text.scss +0 -2
  138. package/variables/components/_form-select.scss +0 -13
  139. package/variables/components/_topic-teaser.scss +0 -32
package/components/card-control.css CHANGED
@@ -1 +1 @@
1
- fieldset .radio-button-card:not(:last-child),fieldset .checkbox-button-card:not(:last-child){margin-bottom:1rem}.radio-button-card,.checkbox-button-card{--post-card-control-border-color: hsl(0, 0%, 40%);--post-card-control-bg: #fff;--post-card-control-color: hsl(0, 0%, 20%);--post-card-control-input-border-color: hsl(0, 0%, 20%);--post-card-control-input-bg: #fff;display:grid;grid-template:"input label icon" "input content content"/min-content auto min-content;gap:0 .5rem;position:relative;padding:1rem;width:100%;background-color:var(--post-card-control-bg);border:2px solid var(--post-card-control-border-color);border-radius:4px;color:var(--post-card-control-color);cursor:pointer}.radio-button-card input.form-check-input[type],.checkbox-button-card input.form-check-input[type]{grid-area:input;position:relative;z-index:2;margin:.25rem 0;background-color:var(--post-card-control-input-bg) !important;border-color:var(--post-card-control-input-border-color) !important;color:var(--post-card-control-input-border-color) !important;cursor:inherit;transition:none}.radio-button-card input.form-check-input[type]:focus,.radio-button-card input.form-check-input[type]:focus-visible,.checkbox-button-card input.form-check-input[type]:focus,.checkbox-button-card input.form-check-input[type]:focus-visible{box-shadow:none}.radio-button-card input.form-check-input[type]~label.form-check-label,.checkbox-button-card input.form-check-input[type]~label.form-check-label{color:inherit !important}.radio-button-card label.form-check-label,.checkbox-button-card label.form-check-label{grid-area:label;margin:.25rem 0;padding:0;border-radius:inherit;transition:none}.radio-button-card label.form-check-label::before,.checkbox-button-card label.form-check-label::before{display:block;content:"";position:absolute;inset:-2px;border-radius:inherit}.radio-button-card label.form-check-label>*,.checkbox-button-card label.form-check-label>*{display:block;position:relative;z-index:2}.radio-button-card label.form-check-label:not(:has(+post-icon)),.checkbox-button-card label.form-check-label:not(:has(+post-icon)){grid-area:1/label/1/icon}.radio-button-card .card-control--content,.checkbox-button-card .card-control--content{grid-area:content}.radio-button-card post-icon,.checkbox-button-card post-icon{grid-area:icon;width:2rem;height:2rem;pointer-events:none}.radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked),.checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked){--post-card-control-border-color: #000;--post-card-control-bg: #fc0}.radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid),.checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid){--post-card-control-border-color: #a51728;--post-card-control-color: #a51728;--post-card-control-input-border-color: #a51728}.radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover),.checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover){--post-card-control-border-color: hsl(0, 0%, 20%);--post-card-control-bg: hsl(0, 0%, 40%);--post-card-control-color: #fff;--post-card-control-input-border-color: #000}.radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)) input:focus-visible~label::before,.checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)) input:focus-visible~label::before{outline-offset:2px;outline:2px solid #1976c8}.radio-button-card:where(:has(input:disabled),.disabled),.checkbox-button-card:where(:has(input:disabled),.disabled){--post-card-control-border-color: hsl(0, 0%, 40%);--post-card-control-bg: transparent;--post-card-control-color: hsl(0, 0%, 40%);--post-card-control-input-border-color: hsl(0, 0%, 40%);--post-card-control-input-bg: transparent;border-style:dashed;text-decoration:line-through;cursor:default}.radio-button-card:where(:has(input:disabled),.disabled) input.form-check-input[type],.checkbox-button-card:where(:has(input:disabled),.disabled) input.form-check-input[type]{border:0 none;padding:2px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.radio-button-card,.checkbox-button-card{--post-card-control-border-color: FieldText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: FieldText;--post-card-control-input-bg: Field;outline:2px solid Field;outline-offset:-4px}.radio-button-card input.form-check-input[type],.checkbox-button-card input.form-check-input[type]{outline:2px solid Field;background-color:Field !important}.radio-button-card input.form-check-input[type]::after,.checkbox-button-card input.form-check-input[type]::after{border-color:Field !important}.radio-button-card label.form-check-label,.radio-button-card .card-control--content,.checkbox-button-card label.form-check-label,.checkbox-button-card .card-control--content{background-color:var(--post-card-control-bg) !important}.radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked),.checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked){--post-card-control-border-color: FieldText;--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText;--post-card-control-input-border-color: FieldText}.radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked) input.form-check-input[type]::after,.checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked) input.form-check-input[type]::after{background-color:FieldText !important}.radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover),.checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover){--post-card-control-border-color: Highlight;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: Highlight}.radio-button-card:where(:has(input:disabled),.disabled),.checkbox-button-card:where(:has(input:disabled),.disabled){--post-card-control-border-color: GrayText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: GrayText;--post-card-control-input-bg: Field}.radio-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked),.checkbox-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked){--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText;position:relative;background-color:Field}.radio-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked)::before,.checkbox-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked)::before{display:block;content:"";position:absolute;inset:2px;background-color:SelectedItem;z-index:1}.radio-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked)>*,.checkbox-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked)>*{position:relative;z-index:2}.radio-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked) input.form-check-input[type]::after,.checkbox-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked) input.form-check-input[type]::after{background-color:FieldText !important}}.bg-dark .radio-button-card,.bg-dark .checkbox-button-card{--post-card-control-border-color: #fff;--post-card-control-bg: transparent;--post-card-control-color: #fff;--post-card-control-input-border-color: #fff;--post-card-control-input-bg: transparent}.bg-dark .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked),.bg-dark .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked){--post-card-control-border-color: #fc0;--post-card-control-bg: #fc0;--post-card-control-color: hsl(0, 0%, 20%);--post-card-control-input-border-color: hsl(0, 0%, 20%);--post-card-control-input-bg: #fff}.bg-dark .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid),.bg-dark .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid){--post-card-control-border-color: #a51728;--post-card-control-bg: #ffdade;--post-card-control-color: #a51728;--post-card-control-input-border-color: #a51728;--post-card-control-input-bg: #fff}.bg-dark .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid):where(:has(input:checked),.checked),.bg-dark .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid):where(:has(input:checked),.checked){--post-card-control-bg: #fc0}.bg-dark .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover),.bg-dark .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover){--post-card-control-border-color: #000;--post-card-control-bg: hsl(0, 0%, 80%);--post-card-control-color: #000;--post-card-control-input-border-color: #000;--post-card-control-input-bg: #fff}.bg-dark .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)) input:focus-visible~label::before,.bg-dark .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)) input:focus-visible~label::before{outline-color:#fff}.bg-dark .radio-button-card:where(:has(input:disabled),.disabled),.bg-dark .checkbox-button-card:where(:has(input:disabled),.disabled){--post-card-control-border-color: color.$white-alpha-80;--post-card-control-bg: transparent;--post-card-control-color: color.$white-alpha-80;--post-card-control-input-border-color: color.$white-alpha-80;--post-card-control-input-bg: transparent}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.bg-dark .radio-button-card,.bg-dark .checkbox-button-card{--post-card-control-border-color: FieldText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: FieldText;--post-card-control-input-bg: Field}.bg-dark .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked),.bg-dark .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked){--post-card-control-border-color: FieldText;--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText;--post-card-control-input-border-color: FieldText}.bg-dark .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover),.bg-dark .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover){--post-card-control-border-color: Highlight;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: Highlight}.bg-dark .radio-button-card:where(:has(input:disabled),.disabled),.bg-dark .checkbox-button-card:where(:has(input:disabled),.disabled){--post-card-control-border-color: GrayText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: GrayText;--post-card-control-input-bg: Field}.bg-dark .radio-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked),.bg-dark .checkbox-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked){--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText}}.bg-black .radio-button-card,.bg-black .checkbox-button-card{--post-card-control-border-color: #fff;--post-card-control-bg: transparent;--post-card-control-color: #fff;--post-card-control-input-border-color: #fff;--post-card-control-input-bg: transparent}.bg-black .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked),.bg-black .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked){--post-card-control-border-color: #fc0;--post-card-control-bg: #fc0;--post-card-control-color: hsl(0, 0%, 20%);--post-card-control-input-border-color: hsl(0, 0%, 20%);--post-card-control-input-bg: #fff}.bg-black .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid),.bg-black .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid){--post-card-control-border-color: #a51728;--post-card-control-bg: #ffdade;--post-card-control-color: #a51728;--post-card-control-input-border-color: #a51728;--post-card-control-input-bg: #fff}.bg-black .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid):where(:has(input:checked),.checked),.bg-black .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid):where(:has(input:checked),.checked){--post-card-control-bg: #fc0}.bg-black .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover),.bg-black .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover){--post-card-control-border-color: #000;--post-card-control-bg: hsl(0, 0%, 80%);--post-card-control-color: #000;--post-card-control-input-border-color: #000;--post-card-control-input-bg: #fff}.bg-black .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)) input:focus-visible~label::before,.bg-black .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)) input:focus-visible~label::before{outline-color:#fff}.bg-black .radio-button-card:where(:has(input:disabled),.disabled),.bg-black .checkbox-button-card:where(:has(input:disabled),.disabled){--post-card-control-border-color: color.$white-alpha-80;--post-card-control-bg: transparent;--post-card-control-color: color.$white-alpha-80;--post-card-control-input-border-color: color.$white-alpha-80;--post-card-control-input-bg: transparent}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.bg-black .radio-button-card,.bg-black .checkbox-button-card{--post-card-control-border-color: FieldText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: FieldText;--post-card-control-input-bg: Field}.bg-black .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked),.bg-black .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked){--post-card-control-border-color: FieldText;--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText;--post-card-control-input-border-color: FieldText}.bg-black .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover),.bg-black .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover){--post-card-control-border-color: Highlight;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: Highlight}.bg-black .radio-button-card:where(:has(input:disabled),.disabled),.bg-black .checkbox-button-card:where(:has(input:disabled),.disabled){--post-card-control-border-color: GrayText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: GrayText;--post-card-control-input-bg: Field}.bg-black .radio-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked),.bg-black .checkbox-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked){--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText}}.bg-primary .radio-button-card,.bg-primary .checkbox-button-card{--post-card-control-border-color: #fff;--post-card-control-bg: transparent;--post-card-control-color: #fff;--post-card-control-input-border-color: #fff;--post-card-control-input-bg: transparent}.bg-primary .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked),.bg-primary .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked){--post-card-control-border-color: #fc0;--post-card-control-bg: #fc0;--post-card-control-color: hsl(0, 0%, 20%);--post-card-control-input-border-color: hsl(0, 0%, 20%);--post-card-control-input-bg: #fff}.bg-primary .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid),.bg-primary .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid){--post-card-control-border-color: #a51728;--post-card-control-bg: #ffdade;--post-card-control-color: #a51728;--post-card-control-input-border-color: #a51728;--post-card-control-input-bg: #fff}.bg-primary .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid):where(:has(input:checked),.checked),.bg-primary .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid):where(:has(input:checked),.checked){--post-card-control-bg: #fc0}.bg-primary .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover),.bg-primary .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover){--post-card-control-border-color: #000;--post-card-control-bg: hsl(0, 0%, 80%);--post-card-control-color: #000;--post-card-control-input-border-color: #000;--post-card-control-input-bg: #fff}.bg-primary .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)) input:focus-visible~label::before,.bg-primary .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)) input:focus-visible~label::before{outline-color:#fff}.bg-primary .radio-button-card:where(:has(input:disabled),.disabled),.bg-primary .checkbox-button-card:where(:has(input:disabled),.disabled){--post-card-control-border-color: color.$white-alpha-80;--post-card-control-bg: transparent;--post-card-control-color: color.$white-alpha-80;--post-card-control-input-border-color: color.$white-alpha-80;--post-card-control-input-bg: transparent}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.bg-primary .radio-button-card,.bg-primary .checkbox-button-card{--post-card-control-border-color: FieldText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: FieldText;--post-card-control-input-bg: Field}.bg-primary .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked),.bg-primary .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked){--post-card-control-border-color: FieldText;--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText;--post-card-control-input-border-color: FieldText}.bg-primary .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover),.bg-primary .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover){--post-card-control-border-color: Highlight;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: Highlight}.bg-primary .radio-button-card:where(:has(input:disabled),.disabled),.bg-primary .checkbox-button-card:where(:has(input:disabled),.disabled){--post-card-control-border-color: GrayText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: GrayText;--post-card-control-input-bg: Field}.bg-primary .radio-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked),.bg-primary .checkbox-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked){--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText}}.bg-secondary .radio-button-card,.bg-secondary .checkbox-button-card{--post-card-control-border-color: #fff;--post-card-control-bg: transparent;--post-card-control-color: #fff;--post-card-control-input-border-color: #fff;--post-card-control-input-bg: transparent}.bg-secondary .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked),.bg-secondary .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked){--post-card-control-border-color: #fc0;--post-card-control-bg: #fc0;--post-card-control-color: hsl(0, 0%, 20%);--post-card-control-input-border-color: hsl(0, 0%, 20%);--post-card-control-input-bg: #fff}.bg-secondary .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid),.bg-secondary .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid){--post-card-control-border-color: #a51728;--post-card-control-bg: #ffdade;--post-card-control-color: #a51728;--post-card-control-input-border-color: #a51728;--post-card-control-input-bg: #fff}.bg-secondary .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid):where(:has(input:checked),.checked),.bg-secondary .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid):where(:has(input:checked),.checked){--post-card-control-bg: #fc0}.bg-secondary .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover),.bg-secondary .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover){--post-card-control-border-color: #000;--post-card-control-bg: hsl(0, 0%, 80%);--post-card-control-color: #000;--post-card-control-input-border-color: #000;--post-card-control-input-bg: #fff}.bg-secondary .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)) input:focus-visible~label::before,.bg-secondary .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)) input:focus-visible~label::before{outline-color:#fff}.bg-secondary .radio-button-card:where(:has(input:disabled),.disabled),.bg-secondary .checkbox-button-card:where(:has(input:disabled),.disabled){--post-card-control-border-color: color.$white-alpha-80;--post-card-control-bg: transparent;--post-card-control-color: color.$white-alpha-80;--post-card-control-input-border-color: color.$white-alpha-80;--post-card-control-input-bg: transparent}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.bg-secondary .radio-button-card,.bg-secondary .checkbox-button-card{--post-card-control-border-color: FieldText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: FieldText;--post-card-control-input-bg: Field}.bg-secondary .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked),.bg-secondary .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked){--post-card-control-border-color: FieldText;--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText;--post-card-control-input-border-color: FieldText}.bg-secondary .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover),.bg-secondary .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover){--post-card-control-border-color: Highlight;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: Highlight}.bg-secondary .radio-button-card:where(:has(input:disabled),.disabled),.bg-secondary .checkbox-button-card:where(:has(input:disabled),.disabled){--post-card-control-border-color: GrayText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: GrayText;--post-card-control-input-bg: Field}.bg-secondary .radio-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked),.bg-secondary .checkbox-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked){--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText}}.bg-success .radio-button-card,.bg-success .checkbox-button-card{--post-card-control-border-color: #fff;--post-card-control-bg: transparent;--post-card-control-color: #fff;--post-card-control-input-border-color: #fff;--post-card-control-input-bg: transparent}.bg-success .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked),.bg-success .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked){--post-card-control-border-color: #fc0;--post-card-control-bg: #fc0;--post-card-control-color: hsl(0, 0%, 20%);--post-card-control-input-border-color: hsl(0, 0%, 20%);--post-card-control-input-bg: #fff}.bg-success .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid),.bg-success .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid){--post-card-control-border-color: #a51728;--post-card-control-bg: #ffdade;--post-card-control-color: #a51728;--post-card-control-input-border-color: #a51728;--post-card-control-input-bg: #fff}.bg-success .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid):where(:has(input:checked),.checked),.bg-success .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid):where(:has(input:checked),.checked){--post-card-control-bg: #fc0}.bg-success .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover),.bg-success .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover){--post-card-control-border-color: #000;--post-card-control-bg: hsl(0, 0%, 80%);--post-card-control-color: #000;--post-card-control-input-border-color: #000;--post-card-control-input-bg: #fff}.bg-success .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)) input:focus-visible~label::before,.bg-success .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)) input:focus-visible~label::before{outline-color:#fff}.bg-success .radio-button-card:where(:has(input:disabled),.disabled),.bg-success .checkbox-button-card:where(:has(input:disabled),.disabled){--post-card-control-border-color: color.$white-alpha-80;--post-card-control-bg: transparent;--post-card-control-color: color.$white-alpha-80;--post-card-control-input-border-color: color.$white-alpha-80;--post-card-control-input-bg: transparent}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.bg-success .radio-button-card,.bg-success .checkbox-button-card{--post-card-control-border-color: FieldText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: FieldText;--post-card-control-input-bg: Field}.bg-success .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked),.bg-success .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked){--post-card-control-border-color: FieldText;--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText;--post-card-control-input-border-color: FieldText}.bg-success .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover),.bg-success .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover){--post-card-control-border-color: Highlight;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: Highlight}.bg-success .radio-button-card:where(:has(input:disabled),.disabled),.bg-success .checkbox-button-card:where(:has(input:disabled),.disabled){--post-card-control-border-color: GrayText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: GrayText;--post-card-control-input-bg: Field}.bg-success .radio-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked),.bg-success .checkbox-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked){--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText}}.bg-error .radio-button-card,.bg-error .checkbox-button-card{--post-card-control-border-color: #fff;--post-card-control-bg: transparent;--post-card-control-color: #fff;--post-card-control-input-border-color: #fff;--post-card-control-input-bg: transparent}.bg-error .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked),.bg-error .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked){--post-card-control-border-color: #fc0;--post-card-control-bg: #fc0;--post-card-control-color: hsl(0, 0%, 20%);--post-card-control-input-border-color: hsl(0, 0%, 20%);--post-card-control-input-bg: #fff}.bg-error .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid),.bg-error .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid){--post-card-control-border-color: #a51728;--post-card-control-bg: #ffdade;--post-card-control-color: #a51728;--post-card-control-input-border-color: #a51728;--post-card-control-input-bg: #fff}.bg-error .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid):where(:has(input:checked),.checked),.bg-error .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid):where(:has(input:checked),.checked){--post-card-control-bg: #fc0}.bg-error .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover),.bg-error .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover){--post-card-control-border-color: #000;--post-card-control-bg: hsl(0, 0%, 80%);--post-card-control-color: #000;--post-card-control-input-border-color: #000;--post-card-control-input-bg: #fff}.bg-error .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)) input:focus-visible~label::before,.bg-error .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)) input:focus-visible~label::before{outline-color:#fff}.bg-error .radio-button-card:where(:has(input:disabled),.disabled),.bg-error .checkbox-button-card:where(:has(input:disabled),.disabled){--post-card-control-border-color: color.$white-alpha-80;--post-card-control-bg: transparent;--post-card-control-color: color.$white-alpha-80;--post-card-control-input-border-color: color.$white-alpha-80;--post-card-control-input-bg: transparent}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.bg-error .radio-button-card,.bg-error .checkbox-button-card{--post-card-control-border-color: FieldText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: FieldText;--post-card-control-input-bg: Field}.bg-error .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked),.bg-error .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked){--post-card-control-border-color: FieldText;--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText;--post-card-control-input-border-color: FieldText}.bg-error .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover),.bg-error .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover){--post-card-control-border-color: Highlight;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: Highlight}.bg-error .radio-button-card:where(:has(input:disabled),.disabled),.bg-error .checkbox-button-card:where(:has(input:disabled),.disabled){--post-card-control-border-color: GrayText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: GrayText;--post-card-control-input-bg: Field}.bg-error .radio-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked),.bg-error .checkbox-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked){--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText}}.alert-primary .radio-button-card,.alert-primary .checkbox-button-card{--post-card-control-border-color: #fff;--post-card-control-bg: transparent;--post-card-control-color: #fff;--post-card-control-input-border-color: #fff;--post-card-control-input-bg: transparent}.alert-primary .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked),.alert-primary .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked){--post-card-control-border-color: #fc0;--post-card-control-bg: #fc0;--post-card-control-color: hsl(0, 0%, 20%);--post-card-control-input-border-color: hsl(0, 0%, 20%);--post-card-control-input-bg: #fff}.alert-primary .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid),.alert-primary .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid){--post-card-control-border-color: #a51728;--post-card-control-bg: #ffdade;--post-card-control-color: #a51728;--post-card-control-input-border-color: #a51728;--post-card-control-input-bg: #fff}.alert-primary .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid):where(:has(input:checked),.checked),.alert-primary .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid):where(:has(input:checked),.checked){--post-card-control-bg: #fc0}.alert-primary .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover),.alert-primary .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover){--post-card-control-border-color: #000;--post-card-control-bg: hsl(0, 0%, 80%);--post-card-control-color: #000;--post-card-control-input-border-color: #000;--post-card-control-input-bg: #fff}.alert-primary .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)) input:focus-visible~label::before,.alert-primary .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)) input:focus-visible~label::before{outline-color:#fff}.alert-primary .radio-button-card:where(:has(input:disabled),.disabled),.alert-primary .checkbox-button-card:where(:has(input:disabled),.disabled){--post-card-control-border-color: color.$white-alpha-80;--post-card-control-bg: transparent;--post-card-control-color: color.$white-alpha-80;--post-card-control-input-border-color: color.$white-alpha-80;--post-card-control-input-bg: transparent}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.alert-primary .radio-button-card,.alert-primary .checkbox-button-card{--post-card-control-border-color: FieldText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: FieldText;--post-card-control-input-bg: Field}.alert-primary .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked),.alert-primary .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked){--post-card-control-border-color: FieldText;--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText;--post-card-control-input-border-color: FieldText}.alert-primary .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover),.alert-primary .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover){--post-card-control-border-color: Highlight;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: Highlight}.alert-primary .radio-button-card:where(:has(input:disabled),.disabled),.alert-primary .checkbox-button-card:where(:has(input:disabled),.disabled){--post-card-control-border-color: GrayText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: GrayText;--post-card-control-input-bg: Field}.alert-primary .radio-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked),.alert-primary .checkbox-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked){--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText}}post-alert[type=primary] .radio-button-card,post-alert[type=primary] .checkbox-button-card{--post-card-control-border-color: #fff;--post-card-control-bg: transparent;--post-card-control-color: #fff;--post-card-control-input-border-color: #fff;--post-card-control-input-bg: transparent}post-alert[type=primary] .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked),post-alert[type=primary] .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked){--post-card-control-border-color: #fc0;--post-card-control-bg: #fc0;--post-card-control-color: hsl(0, 0%, 20%);--post-card-control-input-border-color: hsl(0, 0%, 20%);--post-card-control-input-bg: #fff}post-alert[type=primary] .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid),post-alert[type=primary] .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid){--post-card-control-border-color: #a51728;--post-card-control-bg: #ffdade;--post-card-control-color: #a51728;--post-card-control-input-border-color: #a51728;--post-card-control-input-bg: #fff}post-alert[type=primary] .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid):where(:has(input:checked),.checked),post-alert[type=primary] .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid):where(:has(input:checked),.checked){--post-card-control-bg: #fc0}post-alert[type=primary] .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover),post-alert[type=primary] .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover){--post-card-control-border-color: #000;--post-card-control-bg: hsl(0, 0%, 80%);--post-card-control-color: #000;--post-card-control-input-border-color: #000;--post-card-control-input-bg: #fff}post-alert[type=primary] .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)) input:focus-visible~label::before,post-alert[type=primary] .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)) input:focus-visible~label::before{outline-color:#fff}post-alert[type=primary] .radio-button-card:where(:has(input:disabled),.disabled),post-alert[type=primary] .checkbox-button-card:where(:has(input:disabled),.disabled){--post-card-control-border-color: color.$white-alpha-80;--post-card-control-bg: transparent;--post-card-control-color: color.$white-alpha-80;--post-card-control-input-border-color: color.$white-alpha-80;--post-card-control-input-bg: transparent}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-alert[type=primary] .radio-button-card,post-alert[type=primary] .checkbox-button-card{--post-card-control-border-color: FieldText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: FieldText;--post-card-control-input-bg: Field}post-alert[type=primary] .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked),post-alert[type=primary] .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked){--post-card-control-border-color: FieldText;--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText;--post-card-control-input-border-color: FieldText}post-alert[type=primary] .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover),post-alert[type=primary] .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover){--post-card-control-border-color: Highlight;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: Highlight}post-alert[type=primary] .radio-button-card:where(:has(input:disabled),.disabled),post-alert[type=primary] .checkbox-button-card:where(:has(input:disabled),.disabled){--post-card-control-border-color: GrayText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: GrayText;--post-card-control-input-bg: Field}post-alert[type=primary] .radio-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked),post-alert[type=primary] .checkbox-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked){--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText}}.alert-success .radio-button-card,.alert-success .checkbox-button-card{--post-card-control-border-color: #fff;--post-card-control-bg: transparent;--post-card-control-color: #fff;--post-card-control-input-border-color: #fff;--post-card-control-input-bg: transparent}.alert-success .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked),.alert-success .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked){--post-card-control-border-color: #fc0;--post-card-control-bg: #fc0;--post-card-control-color: hsl(0, 0%, 20%);--post-card-control-input-border-color: hsl(0, 0%, 20%);--post-card-control-input-bg: #fff}.alert-success .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid),.alert-success .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid){--post-card-control-border-color: #a51728;--post-card-control-bg: #ffdade;--post-card-control-color: #a51728;--post-card-control-input-border-color: #a51728;--post-card-control-input-bg: #fff}.alert-success .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid):where(:has(input:checked),.checked),.alert-success .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid):where(:has(input:checked),.checked){--post-card-control-bg: #fc0}.alert-success .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover),.alert-success .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover){--post-card-control-border-color: #000;--post-card-control-bg: hsl(0, 0%, 80%);--post-card-control-color: #000;--post-card-control-input-border-color: #000;--post-card-control-input-bg: #fff}.alert-success .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)) input:focus-visible~label::before,.alert-success .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)) input:focus-visible~label::before{outline-color:#fff}.alert-success .radio-button-card:where(:has(input:disabled),.disabled),.alert-success .checkbox-button-card:where(:has(input:disabled),.disabled){--post-card-control-border-color: color.$white-alpha-80;--post-card-control-bg: transparent;--post-card-control-color: color.$white-alpha-80;--post-card-control-input-border-color: color.$white-alpha-80;--post-card-control-input-bg: transparent}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.alert-success .radio-button-card,.alert-success .checkbox-button-card{--post-card-control-border-color: FieldText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: FieldText;--post-card-control-input-bg: Field}.alert-success .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked),.alert-success .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked){--post-card-control-border-color: FieldText;--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText;--post-card-control-input-border-color: FieldText}.alert-success .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover),.alert-success .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover){--post-card-control-border-color: Highlight;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: Highlight}.alert-success .radio-button-card:where(:has(input:disabled),.disabled),.alert-success .checkbox-button-card:where(:has(input:disabled),.disabled){--post-card-control-border-color: GrayText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: GrayText;--post-card-control-input-bg: Field}.alert-success .radio-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked),.alert-success .checkbox-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked){--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText}}post-alert[type=success] .radio-button-card,post-alert[type=success] .checkbox-button-card{--post-card-control-border-color: #fff;--post-card-control-bg: transparent;--post-card-control-color: #fff;--post-card-control-input-border-color: #fff;--post-card-control-input-bg: transparent}post-alert[type=success] .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked),post-alert[type=success] .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked){--post-card-control-border-color: #fc0;--post-card-control-bg: #fc0;--post-card-control-color: hsl(0, 0%, 20%);--post-card-control-input-border-color: hsl(0, 0%, 20%);--post-card-control-input-bg: #fff}post-alert[type=success] .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid),post-alert[type=success] .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid){--post-card-control-border-color: #a51728;--post-card-control-bg: #ffdade;--post-card-control-color: #a51728;--post-card-control-input-border-color: #a51728;--post-card-control-input-bg: #fff}post-alert[type=success] .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid):where(:has(input:checked),.checked),post-alert[type=success] .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid):where(:has(input:checked),.checked){--post-card-control-bg: #fc0}post-alert[type=success] .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover),post-alert[type=success] .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover){--post-card-control-border-color: #000;--post-card-control-bg: hsl(0, 0%, 80%);--post-card-control-color: #000;--post-card-control-input-border-color: #000;--post-card-control-input-bg: #fff}post-alert[type=success] .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)) input:focus-visible~label::before,post-alert[type=success] .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)) input:focus-visible~label::before{outline-color:#fff}post-alert[type=success] .radio-button-card:where(:has(input:disabled),.disabled),post-alert[type=success] .checkbox-button-card:where(:has(input:disabled),.disabled){--post-card-control-border-color: color.$white-alpha-80;--post-card-control-bg: transparent;--post-card-control-color: color.$white-alpha-80;--post-card-control-input-border-color: color.$white-alpha-80;--post-card-control-input-bg: transparent}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-alert[type=success] .radio-button-card,post-alert[type=success] .checkbox-button-card{--post-card-control-border-color: FieldText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: FieldText;--post-card-control-input-bg: Field}post-alert[type=success] .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked),post-alert[type=success] .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked){--post-card-control-border-color: FieldText;--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText;--post-card-control-input-border-color: FieldText}post-alert[type=success] .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover),post-alert[type=success] .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover){--post-card-control-border-color: Highlight;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: Highlight}post-alert[type=success] .radio-button-card:where(:has(input:disabled),.disabled),post-alert[type=success] .checkbox-button-card:where(:has(input:disabled),.disabled){--post-card-control-border-color: GrayText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: GrayText;--post-card-control-input-bg: Field}post-alert[type=success] .radio-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked),post-alert[type=success] .checkbox-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked){--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText}}.alert-danger .radio-button-card,.alert-danger .checkbox-button-card{--post-card-control-border-color: #fff;--post-card-control-bg: transparent;--post-card-control-color: #fff;--post-card-control-input-border-color: #fff;--post-card-control-input-bg: transparent}.alert-danger .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked),.alert-danger .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked){--post-card-control-border-color: #fc0;--post-card-control-bg: #fc0;--post-card-control-color: hsl(0, 0%, 20%);--post-card-control-input-border-color: hsl(0, 0%, 20%);--post-card-control-input-bg: #fff}.alert-danger .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid),.alert-danger .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid){--post-card-control-border-color: #a51728;--post-card-control-bg: #ffdade;--post-card-control-color: #a51728;--post-card-control-input-border-color: #a51728;--post-card-control-input-bg: #fff}.alert-danger .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid):where(:has(input:checked),.checked),.alert-danger .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid):where(:has(input:checked),.checked){--post-card-control-bg: #fc0}.alert-danger .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover),.alert-danger .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover){--post-card-control-border-color: #000;--post-card-control-bg: hsl(0, 0%, 80%);--post-card-control-color: #000;--post-card-control-input-border-color: #000;--post-card-control-input-bg: #fff}.alert-danger .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)) input:focus-visible~label::before,.alert-danger .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)) input:focus-visible~label::before{outline-color:#fff}.alert-danger .radio-button-card:where(:has(input:disabled),.disabled),.alert-danger .checkbox-button-card:where(:has(input:disabled),.disabled){--post-card-control-border-color: color.$white-alpha-80;--post-card-control-bg: transparent;--post-card-control-color: color.$white-alpha-80;--post-card-control-input-border-color: color.$white-alpha-80;--post-card-control-input-bg: transparent}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.alert-danger .radio-button-card,.alert-danger .checkbox-button-card{--post-card-control-border-color: FieldText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: FieldText;--post-card-control-input-bg: Field}.alert-danger .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked),.alert-danger .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked){--post-card-control-border-color: FieldText;--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText;--post-card-control-input-border-color: FieldText}.alert-danger .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover),.alert-danger .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover){--post-card-control-border-color: Highlight;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: Highlight}.alert-danger .radio-button-card:where(:has(input:disabled),.disabled),.alert-danger .checkbox-button-card:where(:has(input:disabled),.disabled){--post-card-control-border-color: GrayText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: GrayText;--post-card-control-input-bg: Field}.alert-danger .radio-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked),.alert-danger .checkbox-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked){--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText}}post-alert[type=danger] .radio-button-card,post-alert[type=danger] .checkbox-button-card{--post-card-control-border-color: #fff;--post-card-control-bg: transparent;--post-card-control-color: #fff;--post-card-control-input-border-color: #fff;--post-card-control-input-bg: transparent}post-alert[type=danger] .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked),post-alert[type=danger] .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked){--post-card-control-border-color: #fc0;--post-card-control-bg: #fc0;--post-card-control-color: hsl(0, 0%, 20%);--post-card-control-input-border-color: hsl(0, 0%, 20%);--post-card-control-input-bg: #fff}post-alert[type=danger] .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid),post-alert[type=danger] .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid){--post-card-control-border-color: #a51728;--post-card-control-bg: #ffdade;--post-card-control-color: #a51728;--post-card-control-input-border-color: #a51728;--post-card-control-input-bg: #fff}post-alert[type=danger] .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid):where(:has(input:checked),.checked),post-alert[type=danger] .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid):where(:has(input:checked),.checked){--post-card-control-bg: #fc0}post-alert[type=danger] .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover),post-alert[type=danger] .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover){--post-card-control-border-color: #000;--post-card-control-bg: hsl(0, 0%, 80%);--post-card-control-color: #000;--post-card-control-input-border-color: #000;--post-card-control-input-bg: #fff}post-alert[type=danger] .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)) input:focus-visible~label::before,post-alert[type=danger] .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)) input:focus-visible~label::before{outline-color:#fff}post-alert[type=danger] .radio-button-card:where(:has(input:disabled),.disabled),post-alert[type=danger] .checkbox-button-card:where(:has(input:disabled),.disabled){--post-card-control-border-color: color.$white-alpha-80;--post-card-control-bg: transparent;--post-card-control-color: color.$white-alpha-80;--post-card-control-input-border-color: color.$white-alpha-80;--post-card-control-input-bg: transparent}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-alert[type=danger] .radio-button-card,post-alert[type=danger] .checkbox-button-card{--post-card-control-border-color: FieldText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: FieldText;--post-card-control-input-bg: Field}post-alert[type=danger] .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked),post-alert[type=danger] .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked){--post-card-control-border-color: FieldText;--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText;--post-card-control-input-border-color: FieldText}post-alert[type=danger] .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover),post-alert[type=danger] .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover){--post-card-control-border-color: Highlight;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: Highlight}post-alert[type=danger] .radio-button-card:where(:has(input:disabled),.disabled),post-alert[type=danger] .checkbox-button-card:where(:has(input:disabled),.disabled){--post-card-control-border-color: GrayText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: GrayText;--post-card-control-input-bg: Field}post-alert[type=danger] .radio-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked),post-alert[type=danger] .checkbox-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked){--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText}}.alert-notification .radio-button-card,.alert-notification .checkbox-button-card{--post-card-control-border-color: #fff;--post-card-control-bg: transparent;--post-card-control-color: #fff;--post-card-control-input-border-color: #fff;--post-card-control-input-bg: transparent}.alert-notification .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked),.alert-notification .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked){--post-card-control-border-color: #fc0;--post-card-control-bg: #fc0;--post-card-control-color: hsl(0, 0%, 20%);--post-card-control-input-border-color: hsl(0, 0%, 20%);--post-card-control-input-bg: #fff}.alert-notification .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid),.alert-notification .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid){--post-card-control-border-color: #a51728;--post-card-control-bg: #ffdade;--post-card-control-color: #a51728;--post-card-control-input-border-color: #a51728;--post-card-control-input-bg: #fff}.alert-notification .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid):where(:has(input:checked),.checked),.alert-notification .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid):where(:has(input:checked),.checked){--post-card-control-bg: #fc0}.alert-notification .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover),.alert-notification .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover){--post-card-control-border-color: #000;--post-card-control-bg: hsl(0, 0%, 80%);--post-card-control-color: #000;--post-card-control-input-border-color: #000;--post-card-control-input-bg: #fff}.alert-notification .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)) input:focus-visible~label::before,.alert-notification .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)) input:focus-visible~label::before{outline-color:#fff}.alert-notification .radio-button-card:where(:has(input:disabled),.disabled),.alert-notification .checkbox-button-card:where(:has(input:disabled),.disabled){--post-card-control-border-color: color.$white-alpha-80;--post-card-control-bg: transparent;--post-card-control-color: color.$white-alpha-80;--post-card-control-input-border-color: color.$white-alpha-80;--post-card-control-input-bg: transparent}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.alert-notification .radio-button-card,.alert-notification .checkbox-button-card{--post-card-control-border-color: FieldText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: FieldText;--post-card-control-input-bg: Field}.alert-notification .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked),.alert-notification .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked){--post-card-control-border-color: FieldText;--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText;--post-card-control-input-border-color: FieldText}.alert-notification .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover),.alert-notification .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover){--post-card-control-border-color: Highlight;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: Highlight}.alert-notification .radio-button-card:where(:has(input:disabled),.disabled),.alert-notification .checkbox-button-card:where(:has(input:disabled),.disabled){--post-card-control-border-color: GrayText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: GrayText;--post-card-control-input-bg: Field}.alert-notification .radio-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked),.alert-notification .checkbox-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked){--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText}}post-alert[type=notification] .radio-button-card,post-alert[type=notification] .checkbox-button-card{--post-card-control-border-color: #fff;--post-card-control-bg: transparent;--post-card-control-color: #fff;--post-card-control-input-border-color: #fff;--post-card-control-input-bg: transparent}post-alert[type=notification] .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked),post-alert[type=notification] .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked){--post-card-control-border-color: #fc0;--post-card-control-bg: #fc0;--post-card-control-color: hsl(0, 0%, 20%);--post-card-control-input-border-color: hsl(0, 0%, 20%);--post-card-control-input-bg: #fff}post-alert[type=notification] .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid),post-alert[type=notification] .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid){--post-card-control-border-color: #a51728;--post-card-control-bg: #ffdade;--post-card-control-color: #a51728;--post-card-control-input-border-color: #a51728;--post-card-control-input-bg: #fff}post-alert[type=notification] .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid):where(:has(input:checked),.checked),post-alert[type=notification] .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid):where(:has(input:checked),.checked){--post-card-control-bg: #fc0}post-alert[type=notification] .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover),post-alert[type=notification] .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover){--post-card-control-border-color: #000;--post-card-control-bg: hsl(0, 0%, 80%);--post-card-control-color: #000;--post-card-control-input-border-color: #000;--post-card-control-input-bg: #fff}post-alert[type=notification] .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)) input:focus-visible~label::before,post-alert[type=notification] .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)) input:focus-visible~label::before{outline-color:#fff}post-alert[type=notification] .radio-button-card:where(:has(input:disabled),.disabled),post-alert[type=notification] .checkbox-button-card:where(:has(input:disabled),.disabled){--post-card-control-border-color: color.$white-alpha-80;--post-card-control-bg: transparent;--post-card-control-color: color.$white-alpha-80;--post-card-control-input-border-color: color.$white-alpha-80;--post-card-control-input-bg: transparent}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-alert[type=notification] .radio-button-card,post-alert[type=notification] .checkbox-button-card{--post-card-control-border-color: FieldText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: FieldText;--post-card-control-input-bg: Field}post-alert[type=notification] .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked),post-alert[type=notification] .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked){--post-card-control-border-color: FieldText;--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText;--post-card-control-input-border-color: FieldText}post-alert[type=notification] .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover),post-alert[type=notification] .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover){--post-card-control-border-color: Highlight;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: Highlight}post-alert[type=notification] .radio-button-card:where(:has(input:disabled),.disabled),post-alert[type=notification] .checkbox-button-card:where(:has(input:disabled),.disabled){--post-card-control-border-color: GrayText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: GrayText;--post-card-control-input-bg: Field}post-alert[type=notification] .radio-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked),post-alert[type=notification] .checkbox-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked){--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText}}.alert-error .radio-button-card,.alert-error .checkbox-button-card{--post-card-control-border-color: #fff;--post-card-control-bg: transparent;--post-card-control-color: #fff;--post-card-control-input-border-color: #fff;--post-card-control-input-bg: transparent}.alert-error .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked),.alert-error .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked){--post-card-control-border-color: #fc0;--post-card-control-bg: #fc0;--post-card-control-color: hsl(0, 0%, 20%);--post-card-control-input-border-color: hsl(0, 0%, 20%);--post-card-control-input-bg: #fff}.alert-error .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid),.alert-error .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid){--post-card-control-border-color: #a51728;--post-card-control-bg: #ffdade;--post-card-control-color: #a51728;--post-card-control-input-border-color: #a51728;--post-card-control-input-bg: #fff}.alert-error .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid):where(:has(input:checked),.checked),.alert-error .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid):where(:has(input:checked),.checked){--post-card-control-bg: #fc0}.alert-error .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover),.alert-error .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover){--post-card-control-border-color: #000;--post-card-control-bg: hsl(0, 0%, 80%);--post-card-control-color: #000;--post-card-control-input-border-color: #000;--post-card-control-input-bg: #fff}.alert-error .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)) input:focus-visible~label::before,.alert-error .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)) input:focus-visible~label::before{outline-color:#fff}.alert-error .radio-button-card:where(:has(input:disabled),.disabled),.alert-error .checkbox-button-card:where(:has(input:disabled),.disabled){--post-card-control-border-color: color.$white-alpha-80;--post-card-control-bg: transparent;--post-card-control-color: color.$white-alpha-80;--post-card-control-input-border-color: color.$white-alpha-80;--post-card-control-input-bg: transparent}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.alert-error .radio-button-card,.alert-error .checkbox-button-card{--post-card-control-border-color: FieldText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: FieldText;--post-card-control-input-bg: Field}.alert-error .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked),.alert-error .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked){--post-card-control-border-color: FieldText;--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText;--post-card-control-input-border-color: FieldText}.alert-error .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover),.alert-error .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover){--post-card-control-border-color: Highlight;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: Highlight}.alert-error .radio-button-card:where(:has(input:disabled),.disabled),.alert-error .checkbox-button-card:where(:has(input:disabled),.disabled){--post-card-control-border-color: GrayText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: GrayText;--post-card-control-input-bg: Field}.alert-error .radio-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked),.alert-error .checkbox-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked){--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText}}post-alert[type=error] .radio-button-card,post-alert[type=error] .checkbox-button-card{--post-card-control-border-color: #fff;--post-card-control-bg: transparent;--post-card-control-color: #fff;--post-card-control-input-border-color: #fff;--post-card-control-input-bg: transparent}post-alert[type=error] .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked),post-alert[type=error] .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked){--post-card-control-border-color: #fc0;--post-card-control-bg: #fc0;--post-card-control-color: hsl(0, 0%, 20%);--post-card-control-input-border-color: hsl(0, 0%, 20%);--post-card-control-input-bg: #fff}post-alert[type=error] .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid),post-alert[type=error] .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid){--post-card-control-border-color: #a51728;--post-card-control-bg: #ffdade;--post-card-control-color: #a51728;--post-card-control-input-border-color: #a51728;--post-card-control-input-bg: #fff}post-alert[type=error] .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid):where(:has(input:checked),.checked),post-alert[type=error] .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid):where(:has(input:checked),.checked){--post-card-control-bg: #fc0}post-alert[type=error] .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover),post-alert[type=error] .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover){--post-card-control-border-color: #000;--post-card-control-bg: hsl(0, 0%, 80%);--post-card-control-color: #000;--post-card-control-input-border-color: #000;--post-card-control-input-bg: #fff}post-alert[type=error] .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)) input:focus-visible~label::before,post-alert[type=error] .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)) input:focus-visible~label::before{outline-color:#fff}post-alert[type=error] .radio-button-card:where(:has(input:disabled),.disabled),post-alert[type=error] .checkbox-button-card:where(:has(input:disabled),.disabled){--post-card-control-border-color: color.$white-alpha-80;--post-card-control-bg: transparent;--post-card-control-color: color.$white-alpha-80;--post-card-control-input-border-color: color.$white-alpha-80;--post-card-control-input-bg: transparent}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-alert[type=error] .radio-button-card,post-alert[type=error] .checkbox-button-card{--post-card-control-border-color: FieldText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: FieldText;--post-card-control-input-bg: Field}post-alert[type=error] .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked),post-alert[type=error] .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked){--post-card-control-border-color: FieldText;--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText;--post-card-control-input-border-color: FieldText}post-alert[type=error] .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover),post-alert[type=error] .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover){--post-card-control-border-color: Highlight;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: Highlight}post-alert[type=error] .radio-button-card:where(:has(input:disabled),.disabled),post-alert[type=error] .checkbox-button-card:where(:has(input:disabled),.disabled){--post-card-control-border-color: GrayText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: GrayText;--post-card-control-input-bg: Field}post-alert[type=error] .radio-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked),post-alert[type=error] .checkbox-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked){--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText}}
1
+ fieldset .radio-button-card:not(:last-child),fieldset .checkbox-button-card:not(:last-child){margin-bottom:1rem}.radio-button-card,.checkbox-button-card{--post-card-control-border-color: hsl(0, 0%, 40%);--post-card-control-bg: #fff;--post-card-control-color: hsl(0, 0%, 20%);--post-card-control-input-border-color: hsl(0, 0%, 20%);--post-card-control-input-bg: #fff;display:grid;grid-template:"input label icon" "input content content"/min-content auto min-content;align-items:center;gap:0 .5rem;position:relative;padding:1rem;width:100%;background-color:var(--post-card-control-bg);border:2px solid var(--post-card-control-border-color);border-radius:4px;color:var(--post-card-control-color);cursor:pointer}.radio-button-card>input,.checkbox-button-card>input{grid-area:input;position:relative;z-index:2;margin:.25rem 0;background-color:var(--post-card-control-input-bg) !important;border-color:var(--post-card-control-input-border-color) !important;color:var(--post-card-control-input-border-color) !important;cursor:inherit;transition:none;outline:none !important}.radio-button-card>input:hover:not([disabled])~label,.checkbox-button-card>input:hover:not([disabled])~label{color:var(--post-contrast-color);background-color:rgba(0,0,0,0) !important}.radio-button-card>input:focus,.radio-button-card>input:focus-visible,.checkbox-button-card>input:focus,.checkbox-button-card>input:focus-visible{box-shadow:none}.radio-button-card>input~label,.checkbox-button-card>input~label{color:inherit !important}.radio-button-card label,.checkbox-button-card label{grid-area:label;margin:.25rem 0;padding:0;border-radius:inherit;transition:none}.radio-button-card label::before,.checkbox-button-card label::before{display:block;content:"";position:absolute;inset:-2px;border-radius:inherit}.radio-button-card label>*,.checkbox-button-card label>*{display:block;position:relative;z-index:2}.radio-button-card label:not(:has(+post-icon)),.checkbox-button-card label:not(:has(+post-icon)){grid-area:1/label/1/icon}.radio-button-card .card-control--content,.checkbox-button-card .card-control--content{grid-area:content}.radio-button-card post-icon,.checkbox-button-card post-icon{grid-area:icon;width:2rem;height:2rem;pointer-events:none}.radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked),.checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked){--post-card-control-border-color: #000;--post-card-control-bg: #fc0}.radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid),.checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid){--post-card-control-border-color: #a51728;--post-card-control-color: #a51728;--post-card-control-input-border-color: #a51728}.radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover),.checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover){--post-card-control-border-color: hsl(0, 0%, 20%);--post-card-control-bg: hsl(0, 0%, 40%);--post-card-control-color: #fff;--post-card-control-input-border-color: #000}.radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)) input:focus-visible~label::before,.checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)) input:focus-visible~label::before{outline-offset:2px;outline:2px solid #1976c8}.radio-button-card:where(:has(input:disabled),.disabled),.checkbox-button-card:where(:has(input:disabled),.disabled){--post-card-control-border-color: hsl(0, 0%, 40%);--post-card-control-bg: transparent;--post-card-control-color: hsl(0, 0%, 40%);--post-card-control-input-border-color: hsl(0, 0%, 40%);--post-card-control-input-bg: transparent;border-style:dashed;cursor:default}.radio-button-card:where(:has(input:disabled),.disabled) input.form-check-input[type],.checkbox-button-card:where(:has(input:disabled),.disabled) input.form-check-input[type]{padding:2px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.radio-button-card,.checkbox-button-card{--post-card-control-border-color: FieldText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: FieldText;--post-card-control-input-bg: Field;outline:2px solid Field;outline-offset:-4px}.radio-button-card input.form-check-input[type],.checkbox-button-card input.form-check-input[type]{outline:2px solid Field;background-color:Field !important}.radio-button-card input.form-check-input[type]::after,.checkbox-button-card input.form-check-input[type]::after{border-color:Field !important}.radio-button-card label.form-check-label,.radio-button-card .card-control--content,.checkbox-button-card label.form-check-label,.checkbox-button-card .card-control--content{background-color:var(--post-card-control-bg) !important}.radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked),.checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked){--post-card-control-border-color: FieldText;--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText;--post-card-control-input-border-color: FieldText}.radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked) input.form-check-input[type]::after,.checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked) input.form-check-input[type]::after{background-color:FieldText !important}.radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover),.checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover){--post-card-control-border-color: Highlight;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: Highlight}.radio-button-card:where(:has(input:disabled),.disabled),.checkbox-button-card:where(:has(input:disabled),.disabled){--post-card-control-border-color: GrayText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: GrayText;--post-card-control-input-bg: Field}.radio-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked),.checkbox-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked){--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText;position:relative;background-color:Field}.radio-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked)::before,.checkbox-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked)::before{display:block;content:"";position:absolute;inset:2px;background-color:SelectedItem;z-index:1}.radio-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked)>*,.checkbox-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked)>*{position:relative;z-index:2}.radio-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked) input.form-check-input[type]::after,.checkbox-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked) input.form-check-input[type]::after{background-color:FieldText !important}}.bg-dark .radio-button-card,.bg-dark .checkbox-button-card{--post-card-control-border-color: #fff;--post-card-control-bg: transparent;--post-card-control-color: #fff;--post-card-control-input-border-color: #fff;--post-card-control-input-bg: transparent}.bg-dark .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked),.bg-dark .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked){--post-card-control-border-color: #fc0;--post-card-control-bg: #fc0;--post-card-control-color: hsl(0, 0%, 20%);--post-card-control-input-border-color: hsl(0, 0%, 20%);--post-card-control-input-bg: #fff}.bg-dark .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid),.bg-dark .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid){--post-card-control-border-color: #a51728;--post-card-control-bg: #ffdade;--post-card-control-color: #a51728;--post-card-control-input-border-color: #a51728;--post-card-control-input-bg: #fff}.bg-dark .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid):where(:has(input:checked),.checked),.bg-dark .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid):where(:has(input:checked),.checked){--post-card-control-bg: #fc0}.bg-dark .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover),.bg-dark .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover){--post-card-control-border-color: #000;--post-card-control-bg: hsl(0, 0%, 80%);--post-card-control-color: #000;--post-card-control-input-border-color: #000;--post-card-control-input-bg: #fff}.bg-dark .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)) input:focus-visible~label::before,.bg-dark .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)) input:focus-visible~label::before{outline-color:#fff}.bg-dark .radio-button-card:where(:has(input:disabled),.disabled),.bg-dark .checkbox-button-card:where(:has(input:disabled),.disabled){--post-card-control-border-color: color.$white-alpha-80;--post-card-control-bg: transparent;--post-card-control-color: color.$white-alpha-80;--post-card-control-input-border-color: color.$white-alpha-80;--post-card-control-input-bg: transparent}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.bg-dark .radio-button-card,.bg-dark .checkbox-button-card{--post-card-control-border-color: FieldText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: FieldText;--post-card-control-input-bg: Field}.bg-dark .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked),.bg-dark .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked){--post-card-control-border-color: FieldText;--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText;--post-card-control-input-border-color: FieldText}.bg-dark .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover),.bg-dark .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover){--post-card-control-border-color: Highlight;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: Highlight}.bg-dark .radio-button-card:where(:has(input:disabled),.disabled),.bg-dark .checkbox-button-card:where(:has(input:disabled),.disabled){--post-card-control-border-color: GrayText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: GrayText;--post-card-control-input-bg: Field}.bg-dark .radio-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked),.bg-dark .checkbox-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked){--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText}}.bg-black .radio-button-card,.bg-black .checkbox-button-card{--post-card-control-border-color: #fff;--post-card-control-bg: transparent;--post-card-control-color: #fff;--post-card-control-input-border-color: #fff;--post-card-control-input-bg: transparent}.bg-black .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked),.bg-black .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked){--post-card-control-border-color: #fc0;--post-card-control-bg: #fc0;--post-card-control-color: hsl(0, 0%, 20%);--post-card-control-input-border-color: hsl(0, 0%, 20%);--post-card-control-input-bg: #fff}.bg-black .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid),.bg-black .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid){--post-card-control-border-color: #a51728;--post-card-control-bg: #ffdade;--post-card-control-color: #a51728;--post-card-control-input-border-color: #a51728;--post-card-control-input-bg: #fff}.bg-black .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid):where(:has(input:checked),.checked),.bg-black .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid):where(:has(input:checked),.checked){--post-card-control-bg: #fc0}.bg-black .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover),.bg-black .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover){--post-card-control-border-color: #000;--post-card-control-bg: hsl(0, 0%, 80%);--post-card-control-color: #000;--post-card-control-input-border-color: #000;--post-card-control-input-bg: #fff}.bg-black .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)) input:focus-visible~label::before,.bg-black .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)) input:focus-visible~label::before{outline-color:#fff}.bg-black .radio-button-card:where(:has(input:disabled),.disabled),.bg-black .checkbox-button-card:where(:has(input:disabled),.disabled){--post-card-control-border-color: color.$white-alpha-80;--post-card-control-bg: transparent;--post-card-control-color: color.$white-alpha-80;--post-card-control-input-border-color: color.$white-alpha-80;--post-card-control-input-bg: transparent}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.bg-black .radio-button-card,.bg-black .checkbox-button-card{--post-card-control-border-color: FieldText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: FieldText;--post-card-control-input-bg: Field}.bg-black .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked),.bg-black .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked){--post-card-control-border-color: FieldText;--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText;--post-card-control-input-border-color: FieldText}.bg-black .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover),.bg-black .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover){--post-card-control-border-color: Highlight;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: Highlight}.bg-black .radio-button-card:where(:has(input:disabled),.disabled),.bg-black .checkbox-button-card:where(:has(input:disabled),.disabled){--post-card-control-border-color: GrayText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: GrayText;--post-card-control-input-bg: Field}.bg-black .radio-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked),.bg-black .checkbox-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked){--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText}}.bg-primary .radio-button-card,.bg-primary .checkbox-button-card{--post-card-control-border-color: #fff;--post-card-control-bg: transparent;--post-card-control-color: #fff;--post-card-control-input-border-color: #fff;--post-card-control-input-bg: transparent}.bg-primary .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked),.bg-primary .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked){--post-card-control-border-color: #fc0;--post-card-control-bg: #fc0;--post-card-control-color: hsl(0, 0%, 20%);--post-card-control-input-border-color: hsl(0, 0%, 20%);--post-card-control-input-bg: #fff}.bg-primary .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid),.bg-primary .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid){--post-card-control-border-color: #a51728;--post-card-control-bg: #ffdade;--post-card-control-color: #a51728;--post-card-control-input-border-color: #a51728;--post-card-control-input-bg: #fff}.bg-primary .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid):where(:has(input:checked),.checked),.bg-primary .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid):where(:has(input:checked),.checked){--post-card-control-bg: #fc0}.bg-primary .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover),.bg-primary .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover){--post-card-control-border-color: #000;--post-card-control-bg: hsl(0, 0%, 80%);--post-card-control-color: #000;--post-card-control-input-border-color: #000;--post-card-control-input-bg: #fff}.bg-primary .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)) input:focus-visible~label::before,.bg-primary .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)) input:focus-visible~label::before{outline-color:#fff}.bg-primary .radio-button-card:where(:has(input:disabled),.disabled),.bg-primary .checkbox-button-card:where(:has(input:disabled),.disabled){--post-card-control-border-color: color.$white-alpha-80;--post-card-control-bg: transparent;--post-card-control-color: color.$white-alpha-80;--post-card-control-input-border-color: color.$white-alpha-80;--post-card-control-input-bg: transparent}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.bg-primary .radio-button-card,.bg-primary .checkbox-button-card{--post-card-control-border-color: FieldText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: FieldText;--post-card-control-input-bg: Field}.bg-primary .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked),.bg-primary .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked){--post-card-control-border-color: FieldText;--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText;--post-card-control-input-border-color: FieldText}.bg-primary .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover),.bg-primary .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover){--post-card-control-border-color: Highlight;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: Highlight}.bg-primary .radio-button-card:where(:has(input:disabled),.disabled),.bg-primary .checkbox-button-card:where(:has(input:disabled),.disabled){--post-card-control-border-color: GrayText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: GrayText;--post-card-control-input-bg: Field}.bg-primary .radio-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked),.bg-primary .checkbox-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked){--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText}}.bg-secondary .radio-button-card,.bg-secondary .checkbox-button-card{--post-card-control-border-color: #fff;--post-card-control-bg: transparent;--post-card-control-color: #fff;--post-card-control-input-border-color: #fff;--post-card-control-input-bg: transparent}.bg-secondary .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked),.bg-secondary .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked){--post-card-control-border-color: #fc0;--post-card-control-bg: #fc0;--post-card-control-color: hsl(0, 0%, 20%);--post-card-control-input-border-color: hsl(0, 0%, 20%);--post-card-control-input-bg: #fff}.bg-secondary .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid),.bg-secondary .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid){--post-card-control-border-color: #a51728;--post-card-control-bg: #ffdade;--post-card-control-color: #a51728;--post-card-control-input-border-color: #a51728;--post-card-control-input-bg: #fff}.bg-secondary .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid):where(:has(input:checked),.checked),.bg-secondary .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid):where(:has(input:checked),.checked){--post-card-control-bg: #fc0}.bg-secondary .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover),.bg-secondary .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover){--post-card-control-border-color: #000;--post-card-control-bg: hsl(0, 0%, 80%);--post-card-control-color: #000;--post-card-control-input-border-color: #000;--post-card-control-input-bg: #fff}.bg-secondary .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)) input:focus-visible~label::before,.bg-secondary .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)) input:focus-visible~label::before{outline-color:#fff}.bg-secondary .radio-button-card:where(:has(input:disabled),.disabled),.bg-secondary .checkbox-button-card:where(:has(input:disabled),.disabled){--post-card-control-border-color: color.$white-alpha-80;--post-card-control-bg: transparent;--post-card-control-color: color.$white-alpha-80;--post-card-control-input-border-color: color.$white-alpha-80;--post-card-control-input-bg: transparent}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.bg-secondary .radio-button-card,.bg-secondary .checkbox-button-card{--post-card-control-border-color: FieldText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: FieldText;--post-card-control-input-bg: Field}.bg-secondary .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked),.bg-secondary .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked){--post-card-control-border-color: FieldText;--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText;--post-card-control-input-border-color: FieldText}.bg-secondary .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover),.bg-secondary .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover){--post-card-control-border-color: Highlight;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: Highlight}.bg-secondary .radio-button-card:where(:has(input:disabled),.disabled),.bg-secondary .checkbox-button-card:where(:has(input:disabled),.disabled){--post-card-control-border-color: GrayText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: GrayText;--post-card-control-input-bg: Field}.bg-secondary .radio-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked),.bg-secondary .checkbox-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked){--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText}}.bg-success .radio-button-card,.bg-success .checkbox-button-card{--post-card-control-border-color: #fff;--post-card-control-bg: transparent;--post-card-control-color: #fff;--post-card-control-input-border-color: #fff;--post-card-control-input-bg: transparent}.bg-success .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked),.bg-success .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked){--post-card-control-border-color: #fc0;--post-card-control-bg: #fc0;--post-card-control-color: hsl(0, 0%, 20%);--post-card-control-input-border-color: hsl(0, 0%, 20%);--post-card-control-input-bg: #fff}.bg-success .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid),.bg-success .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid){--post-card-control-border-color: #a51728;--post-card-control-bg: #ffdade;--post-card-control-color: #a51728;--post-card-control-input-border-color: #a51728;--post-card-control-input-bg: #fff}.bg-success .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid):where(:has(input:checked),.checked),.bg-success .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid):where(:has(input:checked),.checked){--post-card-control-bg: #fc0}.bg-success .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover),.bg-success .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover){--post-card-control-border-color: #000;--post-card-control-bg: hsl(0, 0%, 80%);--post-card-control-color: #000;--post-card-control-input-border-color: #000;--post-card-control-input-bg: #fff}.bg-success .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)) input:focus-visible~label::before,.bg-success .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)) input:focus-visible~label::before{outline-color:#fff}.bg-success .radio-button-card:where(:has(input:disabled),.disabled),.bg-success .checkbox-button-card:where(:has(input:disabled),.disabled){--post-card-control-border-color: color.$white-alpha-80;--post-card-control-bg: transparent;--post-card-control-color: color.$white-alpha-80;--post-card-control-input-border-color: color.$white-alpha-80;--post-card-control-input-bg: transparent}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.bg-success .radio-button-card,.bg-success .checkbox-button-card{--post-card-control-border-color: FieldText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: FieldText;--post-card-control-input-bg: Field}.bg-success .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked),.bg-success .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked){--post-card-control-border-color: FieldText;--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText;--post-card-control-input-border-color: FieldText}.bg-success .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover),.bg-success .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover){--post-card-control-border-color: Highlight;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: Highlight}.bg-success .radio-button-card:where(:has(input:disabled),.disabled),.bg-success .checkbox-button-card:where(:has(input:disabled),.disabled){--post-card-control-border-color: GrayText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: GrayText;--post-card-control-input-bg: Field}.bg-success .radio-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked),.bg-success .checkbox-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked){--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText}}.bg-error .radio-button-card,.bg-error .checkbox-button-card{--post-card-control-border-color: #fff;--post-card-control-bg: transparent;--post-card-control-color: #fff;--post-card-control-input-border-color: #fff;--post-card-control-input-bg: transparent}.bg-error .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked),.bg-error .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked){--post-card-control-border-color: #fc0;--post-card-control-bg: #fc0;--post-card-control-color: hsl(0, 0%, 20%);--post-card-control-input-border-color: hsl(0, 0%, 20%);--post-card-control-input-bg: #fff}.bg-error .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid),.bg-error .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid){--post-card-control-border-color: #a51728;--post-card-control-bg: #ffdade;--post-card-control-color: #a51728;--post-card-control-input-border-color: #a51728;--post-card-control-input-bg: #fff}.bg-error .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid):where(:has(input:checked),.checked),.bg-error .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:invalid),:has(input[aria-invalid]),:has(input.is-invalid),.is-invalid):where(:has(input:checked),.checked){--post-card-control-bg: #fc0}.bg-error .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover),.bg-error .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover){--post-card-control-border-color: #000;--post-card-control-bg: hsl(0, 0%, 80%);--post-card-control-color: #000;--post-card-control-input-border-color: #000;--post-card-control-input-bg: #fff}.bg-error .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)) input:focus-visible~label::before,.bg-error .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)) input:focus-visible~label::before{outline-color:#fff}.bg-error .radio-button-card:where(:has(input:disabled),.disabled),.bg-error .checkbox-button-card:where(:has(input:disabled),.disabled){--post-card-control-border-color: color.$white-alpha-80;--post-card-control-bg: transparent;--post-card-control-color: color.$white-alpha-80;--post-card-control-input-border-color: color.$white-alpha-80;--post-card-control-input-bg: transparent}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.bg-error .radio-button-card,.bg-error .checkbox-button-card{--post-card-control-border-color: FieldText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: FieldText;--post-card-control-input-bg: Field}.bg-error .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked),.bg-error .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:has(input:checked),.checked){--post-card-control-border-color: FieldText;--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText;--post-card-control-input-border-color: FieldText}.bg-error .radio-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover),.bg-error .checkbox-button-card:where(:not(:has(input:disabled)),:not(.disabled)):where(:hover){--post-card-control-border-color: Highlight;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: Highlight}.bg-error .radio-button-card:where(:has(input:disabled),.disabled),.bg-error .checkbox-button-card:where(:has(input:disabled),.disabled){--post-card-control-border-color: GrayText;--post-card-control-bg: Field;--post-card-control-color: FieldText;--post-card-control-input-border-color: GrayText;--post-card-control-input-bg: Field}.bg-error .radio-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked),.bg-error .checkbox-button-card:where(:has(input:disabled),.disabled):where(:has(input:checked),.checked){--post-card-control-bg: SelectedItem;--post-card-control-color: SelectedItemText}}
package/components/card-control.scss CHANGED
@@ -9,7 +9,6 @@
9
9
  * There are a whole bunch of !important statments in this file.
10
10
  * They are necessary and should not be removed, because we need to override the .form-check styles here.
11
11
  */
12
-
13
12
  fieldset {
14
13
  .radio-button-card,
15
14
  .checkbox-button-card {
@@ -29,6 +28,7 @@ fieldset {
29
28
 
30
29
  display: grid;
31
30
  grid-template: 'input label icon' 'input content content' / min-content auto min-content;
31
+ align-items: center;
32
32
  gap: 0 spacing.$size-mini;
33
33
  position: relative;
34
34
  padding: spacing.$size-regular;
@@ -39,7 +39,7 @@ fieldset {
39
39
  color: var(--post-card-control-color);
40
40
  cursor: pointer;
41
41
 
42
- input.form-check-input[type] {
42
+ > input {
43
43
  grid-area: input;
44
44
  position: relative;
45
45
  z-index: 2;
@@ -50,17 +50,24 @@ fieldset {
50
50
  cursor: inherit;
51
51
  transition: none;
52
52
 
53
+ @include utilities.focus-style-none();
54
+
55
+ &:hover:not([disabled]) ~ label {
56
+ color: var(--post-contrast-color);
57
+ background-color: transparent !important;
58
+ }
59
+
53
60
  &:focus,
54
61
  &:focus-visible {
55
62
  box-shadow: none;
56
63
  }
57
64
 
58
- ~ label.form-check-label {
65
+ ~ label {
59
66
  color: inherit !important;
60
67
  }
61
68
  }
62
69
 
63
- label.form-check-label {
70
+ label {
64
71
  grid-area: label;
65
72
  margin: spacing.$size-micro 0;
66
73
  padding: 0;
@@ -131,12 +138,10 @@ fieldset {
131
138
  --post-card-control-input-bg: transparent;
132
139
 
133
140
  border-style: dashed;
134
- text-decoration: line-through;
135
141
  cursor: default;
136
142
 
137
143
  input.form-check-input[type] {
138
- border: 0 none;
139
- padding: form-check.$form-check-input-border-width;
144
+ padding: forms.$input-border-width;
140
145
  }
141
146
  }
142
147
 
package/components/card.css CHANGED
@@ -1 +1 @@
1
- .card{--bs-card-spacer-y: 1.25rem;--bs-card-spacer-x: 1rem;--bs-card-title-spacer-y: 0.5rem;--bs-card-title-color: ;--bs-card-subtitle-color: ;--bs-card-border-width: 1px;--bs-card-border-color: hsl(0, 0%, 80%);--bs-card-border-radius: 2px;--bs-card-box-shadow: ;--bs-card-inner-border-radius: calc(2px - 1px);--bs-card-cap-padding-y: 0.625rem;--bs-card-cap-padding-x: 1rem;--bs-card-cap-bg: #faf9f8;--bs-card-cap-color: ;--bs-card-height: ;--bs-card-color: #000;--bs-card-bg: #fff;--bs-card-img-overlay-padding: 1rem;--bs-card-group-margin: 15px;position:relative;display:flex;flex-direction:column;min-width:0;height:var(--bs-card-height);color:var(--bs-body-color);word-wrap:break-word;background-color:var(--bs-card-bg);background-clip:border-box;border:var(--bs-card-border-width) solid var(--bs-card-border-color);border-radius:var(--bs-card-border-radius)}.card>hr{margin-right:0;margin-left:0}.card>.list-group{border-top:inherit;border-bottom:inherit}.card>.list-group:first-child{border-top-width:0;border-top-left-radius:var(--bs-card-inner-border-radius);border-top-right-radius:var(--bs-card-inner-border-radius)}.card>.list-group:last-child{border-bottom-width:0;border-bottom-right-radius:var(--bs-card-inner-border-radius);border-bottom-left-radius:var(--bs-card-inner-border-radius)}.card>.card-header+.list-group,.card>.list-group+.card-footer{border-top:0}.card-body{flex:1 1 auto;padding:var(--bs-card-spacer-y) var(--bs-card-spacer-x);color:var(--bs-card-color)}.card-title{margin-bottom:var(--bs-card-title-spacer-y);color:var(--bs-card-title-color)}.card-subtitle{margin-top:calc(-0.5*var(--bs-card-title-spacer-y));margin-bottom:0;color:var(--bs-card-subtitle-color)}.card-text:last-child{margin-bottom:0}.card-link+.card-link{margin-left:var(--bs-card-spacer-x)}.card-header{padding:var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);margin-bottom:0;color:var(--bs-card-cap-color);background-color:var(--bs-card-cap-bg);border-bottom:var(--bs-card-border-width) solid var(--bs-card-border-color)}.card-header:first-child{border-radius:var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0}.card-footer{padding:var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);color:var(--bs-card-cap-color);background-color:var(--bs-card-cap-bg);border-top:var(--bs-card-border-width) solid var(--bs-card-border-color)}.card-footer:last-child{border-radius:0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius)}.card-header-tabs{margin-right:calc(-0.5*var(--bs-card-cap-padding-x));margin-bottom:calc(-1*var(--bs-card-cap-padding-y));margin-left:calc(-0.5*var(--bs-card-cap-padding-x));border-bottom:0}.card-header-tabs .nav-link.active{background-color:var(--bs-card-bg);border-bottom-color:var(--bs-card-bg)}.card-header-pills{margin-right:calc(-0.5*var(--bs-card-cap-padding-x));margin-left:calc(-0.5*var(--bs-card-cap-padding-x))}.card-img-overlay{position:absolute;top:0;right:0;bottom:0;left:0;padding:var(--bs-card-img-overlay-padding);border-radius:var(--bs-card-inner-border-radius)}.card-img,.card-img-top,.card-img-bottom{width:100%}.card-img,.card-img-top{border-top-left-radius:var(--bs-card-inner-border-radius);border-top-right-radius:var(--bs-card-inner-border-radius)}.card-img,.card-img-bottom{border-bottom-right-radius:var(--bs-card-inner-border-radius);border-bottom-left-radius:var(--bs-card-inner-border-radius)}.card-group>.card{margin-bottom:var(--bs-card-group-margin)}@media(min-width: 400px){.card-group{display:flex;flex-flow:row wrap}.card-group>.card{flex:1 0 0%;margin-bottom:0}.card-group>.card+.card{margin-left:0;border-left:0}.card-group>.card:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.card-group>.card:not(:last-child) .card-img-top,.card-group>.card:not(:last-child) .card-header{border-top-right-radius:0}.card-group>.card:not(:last-child) .card-img-bottom,.card-group>.card:not(:last-child) .card-footer{border-bottom-right-radius:0}.card-group>.card:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.card-group>.card:not(:first-child) .card-img-top,.card-group>.card:not(:first-child) .card-header{border-top-left-radius:0}.card-group>.card:not(:first-child) .card-img-bottom,.card-group>.card:not(:first-child) .card-footer{border-bottom-left-radius:0}}.card-group{margin-top:1px;margin-left:1px;box-shadow:0 0 8px 0 rgba(0,0,0,.4)}.card{transition:box-shadow .25s;border:0;border-radius:0;outline:1px solid #ccc;box-shadow:0 0 8px 0 rgba(0,0,0,.4);color:#000}.card.product-card,.card.card-button{box-shadow:none}.card.product-card:hover,.card.product-card:focus,.card.card-button:hover,.card.card-button:focus{z-index:1;box-shadow:0 0 8px 0 rgba(0,0,0,.4)}.card+.card{margin-top:12px}.card-group>.card{margin-right:1px;margin-bottom:1px;box-shadow:none}.card-group>.card+.card{margin-top:0}.card .list-group-item{padding:1.25rem 1rem;border-color:#ccc}.card .link-icon{text-decoration:none}.card .link-icon post-icon{width:1.5rem;height:1.5rem;margin-right:.5rem}.card>.list-group+.card-footer,.card .card-body~.card-body{border-top:1px solid #ccc}.card-header>*:first-child,.card-body>*:first-child,.card-footer>*:first-child,.list-group-item>*:first-child{margin-top:0}.card-header>*:last-child,.card-body>*:last-child,.card-footer>*:last-child,.list-group-item>*:last-child{margin-bottom:0}.card-header,.card-footer,.card-body{padding:1.25rem 1rem}@media(max-width: 399.98px){.product-card .card-header,.card-button .card-header,.product-card .card-footer,.card-button .card-footer,.product-card .card-body,.card-button .card-body{padding:1rem}}@media(min-width: 400px)and (max-width: 779.98px){.product-card .card-header,.card-button .card-header,.product-card .card-footer,.card-button .card-footer,.product-card .card-body,.card-button .card-body{padding:1.5rem}}@media(min-width: 780px)and (max-width: 1439.98px){.product-card .card-header,.card-button .card-header,.product-card .card-footer,.card-button .card-footer,.product-card .card-body,.card-button .card-body{padding:2rem}}@media(min-width: 1440px){.product-card .card-header,.card-button .card-header,.product-card .card-footer,.card-button .card-footer,.product-card .card-body,.card-button .card-body{padding:2.5rem}}.card-white .card-header,.card-white .card-footer,.card-white .card-body{background:#fff}.card-header{align-items:center}.card-header>*:not(:last-child){margin-right:1rem}.product-card{text-decoration:none}.product-card:hover,.product-card:focus{color:inherit;text-decoration:none}.product-card .link-icon{display:flex;align-items:center;transition:opacity 250ms;opacity:.75}.product-card .link-icon:hover,.product-card .link-icon:focus{opacity:1}@media all and (-ms-high-contrast: none),(-ms-high-contrast: active){.card img{height:100%}.card-group .card img{height:auto;max-height:50%}.card-group .card>.card-header,.card-group .card>.card-footer{flex:0 0 auto}}.card-links{display:flex;flex-wrap:wrap;justify-content:space-between;padding-right:.5rem;padding-left:.5rem}.card-links a{display:inline-flex;align-items:center;padding-inline:.5rem;gap:.5rem;color:#666;text-decoration:none;-ms-flex-align:center}.card-links a::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.667 5.333H18.8L29.467 16H0v1.333h29.467L18.8 28h1.867L32 16.667z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.667 5.333H18.8L29.467 16H0v1.333h29.467L18.8 28h1.867L32 16.667z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;content:"";display:inline-block;width:1.5rem;height:1.5rem}.card-links a:hover,.card-links a:focus{color:#000}
1
+ .card{--bs-card-spacer-y: 1.25rem;--bs-card-spacer-x: 1rem;--bs-card-title-spacer-y: 0.5rem;--bs-card-title-color: ;--bs-card-subtitle-color: ;--bs-card-border-width: 1px;--bs-card-border-color: hsl(0, 0%, 80%);--bs-card-border-radius: 2px;--bs-card-box-shadow: ;--bs-card-inner-border-radius: calc(2px - 1px);--bs-card-cap-padding-y: 0.625rem;--bs-card-cap-padding-x: 1rem;--bs-card-cap-bg: #faf9f8;--bs-card-cap-color: ;--bs-card-height: ;--bs-card-color: #000;--bs-card-bg: #fff;--bs-card-img-overlay-padding: 1rem;--bs-card-group-margin: 15px;position:relative;display:flex;flex-direction:column;min-width:0;height:var(--bs-card-height);color:var(--bs-body-color);word-wrap:break-word;background-color:var(--bs-card-bg);background-clip:border-box;border:var(--bs-card-border-width) solid var(--bs-card-border-color);border-radius:var(--bs-card-border-radius)}.card>hr{margin-right:0;margin-left:0}.card>.list-group{border-top:inherit;border-bottom:inherit}.card>.list-group:first-child{border-top-width:0;border-top-left-radius:var(--bs-card-inner-border-radius);border-top-right-radius:var(--bs-card-inner-border-radius)}.card>.list-group:last-child{border-bottom-width:0;border-bottom-right-radius:var(--bs-card-inner-border-radius);border-bottom-left-radius:var(--bs-card-inner-border-radius)}.card>.card-header+.list-group,.card>.list-group+.card-footer{border-top:0}.card-body{flex:1 1 auto;padding:var(--bs-card-spacer-y) var(--bs-card-spacer-x);color:var(--bs-card-color)}.card-title{margin-bottom:var(--bs-card-title-spacer-y);color:var(--bs-card-title-color)}.card-subtitle{margin-top:calc(-0.5*var(--bs-card-title-spacer-y));margin-bottom:0;color:var(--bs-card-subtitle-color)}.card-text:last-child{margin-bottom:0}.card-link+.card-link{margin-left:var(--bs-card-spacer-x)}.card-header{padding:var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);margin-bottom:0;color:var(--bs-card-cap-color);background-color:var(--bs-card-cap-bg);border-bottom:var(--bs-card-border-width) solid var(--bs-card-border-color)}.card-header:first-child{border-radius:var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0}.card-footer{padding:var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);color:var(--bs-card-cap-color);background-color:var(--bs-card-cap-bg);border-top:var(--bs-card-border-width) solid var(--bs-card-border-color)}.card-footer:last-child{border-radius:0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius)}.card-header-tabs{margin-right:calc(-0.5*var(--bs-card-cap-padding-x));margin-bottom:calc(-1*var(--bs-card-cap-padding-y));margin-left:calc(-0.5*var(--bs-card-cap-padding-x));border-bottom:0}.card-header-tabs .nav-link.active{background-color:var(--bs-card-bg);border-bottom-color:var(--bs-card-bg)}.card-header-pills{margin-right:calc(-0.5*var(--bs-card-cap-padding-x));margin-left:calc(-0.5*var(--bs-card-cap-padding-x))}.card-img-overlay{position:absolute;top:0;right:0;bottom:0;left:0;padding:var(--bs-card-img-overlay-padding);border-radius:var(--bs-card-inner-border-radius)}.card-img,.card-img-top,.card-img-bottom{width:100%}.card-img,.card-img-top{border-top-left-radius:var(--bs-card-inner-border-radius);border-top-right-radius:var(--bs-card-inner-border-radius)}.card-img,.card-img-bottom{border-bottom-right-radius:var(--bs-card-inner-border-radius);border-bottom-left-radius:var(--bs-card-inner-border-radius)}.card-group>.card{margin-bottom:var(--bs-card-group-margin)}@media(min-width: 600px){.card-group{display:flex;flex-flow:row wrap}.card-group>.card{flex:1 0 0%;margin-bottom:0}.card-group>.card+.card{margin-left:0;border-left:0}.card-group>.card:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.card-group>.card:not(:last-child) .card-img-top,.card-group>.card:not(:last-child) .card-header{border-top-right-radius:0}.card-group>.card:not(:last-child) .card-img-bottom,.card-group>.card:not(:last-child) .card-footer{border-bottom-right-radius:0}.card-group>.card:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.card-group>.card:not(:first-child) .card-img-top,.card-group>.card:not(:first-child) .card-header{border-top-left-radius:0}.card-group>.card:not(:first-child) .card-img-bottom,.card-group>.card:not(:first-child) .card-footer{border-bottom-left-radius:0}}.card-group{margin-top:1px;margin-left:1px;box-shadow:0 0 8px 0 rgba(0,0,0,.4)}.card{transition:box-shadow .25s;border:0;border-radius:0;outline:1px solid #ccc;box-shadow:0 0 8px 0 rgba(0,0,0,.4);color:#000}.card.product-card,.card.card-button{box-shadow:none}.card.product-card:hover,.card.product-card:focus,.card.card-button:hover,.card.card-button:focus{z-index:1;box-shadow:0 0 8px 0 rgba(0,0,0,.4)}.card+.card{margin-top:12px}.card-group>.card{margin-right:1px;margin-bottom:1px;box-shadow:none}.card-group>.card+.card{margin-top:0}.card .list-group-item{padding:1.25rem 1rem;border-color:#ccc}.card .link-icon{text-decoration:none}.card .link-icon post-icon{width:1.5rem;height:1.5rem;margin-right:.5rem}.card>.list-group+.card-footer,.card .card-body~.card-body{border-top:1px solid #ccc}.card-header>*:first-child,.card-body>*:first-child,.card-footer>*:first-child,.list-group-item>*:first-child{margin-top:0}.card-header>*:last-child,.card-body>*:last-child,.card-footer>*:last-child,.list-group-item>*:last-child{margin-bottom:0}.card-header,.card-footer,.card-body{padding:1.25rem 1rem}@media(max-width: 599.98px){.product-card .card-header,.card-button .card-header,.product-card .card-footer,.card-button .card-footer,.product-card .card-body,.card-button .card-body{padding:1rem}}@media(min-width: 600px)and (max-width: 779.98px){.product-card .card-header,.card-button .card-header,.product-card .card-footer,.card-button .card-footer,.product-card .card-body,.card-button .card-body{padding:1.5rem}}@media(min-width: 780px){.product-card .card-header,.card-button .card-header,.product-card .card-footer,.card-button .card-footer,.product-card .card-body,.card-button .card-body{padding:2rem}}.card-white .card-header,.card-white .card-footer,.card-white .card-body{background:#fff}.card-header{align-items:center}.card-header>*:not(:last-child){margin-right:1rem}.product-card{text-decoration:none}.product-card:hover,.product-card:focus{color:inherit;text-decoration:none}.product-card .link-icon{display:flex;align-items:center;transition:opacity 250ms;opacity:.75}.product-card .link-icon:hover,.product-card .link-icon:focus{opacity:1}@media all and (-ms-high-contrast: none),(-ms-high-contrast: active){.card img{height:100%}.card-group .card img{height:auto;max-height:50%}.card-group .card>.card-header,.card-group .card>.card-footer{flex:0 0 auto}}.card-links{display:flex;flex-wrap:wrap;justify-content:space-between;padding-right:.5rem;padding-left:.5rem}.card-links a{display:inline-flex;align-items:center;padding-inline:.5rem;gap:.5rem;color:#666;text-decoration:none;-ms-flex-align:center}.card-links a::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.667 5.333H18.8L29.467 16H0v1.333h29.467L18.8 28h1.867L32 16.667z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.667 5.333H18.8L29.467 16H0v1.333h29.467L18.8 28h1.867L32 16.667z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;content:"";display:inline-block;width:1.5rem;height:1.5rem}.card-links a:hover,.card-links a:focus{color:#000}
package/components/card.scss CHANGED
@@ -102,13 +102,9 @@
102
102
  padding: spacing.$size-large;
103
103
  }
104
104
 
105
- @include media-breakpoint-between(md, xxl) {
105
+ @include media-breakpoint-up(md) {
106
106
  padding: spacing.$size-big;
107
107
  }
108
-
109
- @include media-breakpoint-up(xxl) {
110
- padding: spacing.$size-bigger-big;
111
- }
112
108
  }
113
109
 
114
110
  .card-white & {
package/components/carousel.css CHANGED
@@ -1 +1 @@
1
- .carousel{position:relative}.carousel.pointer-event{touch-action:pan-y}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-inner::after{display:block;clear:both;content:""}.carousel-item{position:relative;display:none;float:left;width:100%;margin-right:-100%;backface-visibility:hidden;transition:transform .6s ease-in-out}@media(prefers-reduced-motion: reduce){.carousel-item{transition:none}}.carousel-item.active,.carousel-item-next,.carousel-item-prev{display:block}.carousel-item-next:not(.carousel-item-start),.active.carousel-item-end{transform:translateX(100%)}.carousel-item-prev:not(.carousel-item-end),.active.carousel-item-start{transform:translateX(-100%)}.carousel-fade .carousel-item{opacity:0;transition-property:opacity;transform:none}.carousel-fade .carousel-item.active,.carousel-fade .carousel-item-next.carousel-item-start,.carousel-fade .carousel-item-prev.carousel-item-end{z-index:1;opacity:1}.carousel-fade .active.carousel-item-start,.carousel-fade .active.carousel-item-end{z-index:0;opacity:0;transition:opacity 0s .6s}@media(prefers-reduced-motion: reduce){.carousel-fade .active.carousel-item-start,.carousel-fade .active.carousel-item-end{transition:none}}.carousel-control-prev,.carousel-control-next{position:absolute;top:0;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff;text-align:center;background:none;border:0;opacity:.5;transition:opacity .15s ease}@media(prefers-reduced-motion: reduce){.carousel-control-prev,.carousel-control-next{transition:none}}.carousel-control-prev:hover,.carousel-control-prev:focus,.carousel-control-next:hover,.carousel-control-next:focus{color:#fff;text-decoration:none;outline:0;opacity:.9}.carousel-control-prev{left:0}.carousel-control-next{right:0}.carousel-control-prev-icon,.carousel-control-next-icon{display:inline-block;width:20px;height:20px;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.carousel-control-prev-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e")*/}.carousel-control-next-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e")*/}.carousel-indicators{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;justify-content:center;padding:0;margin-right:15%;margin-bottom:1rem;margin-left:15%}.carousel-indicators [data-bs-target]{box-sizing:content-box;flex:0 1 auto;width:30px;height:3px;padding:0;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:#fff;background-clip:padding-box;border:0;border-top:10px solid rgba(0,0,0,0);border-bottom:10px solid rgba(0,0,0,0);opacity:.5;transition:opacity .6s ease}@media(prefers-reduced-motion: reduce){.carousel-indicators [data-bs-target]{transition:none}}.carousel-indicators .active{opacity:1}.carousel-caption{position:absolute;right:15%;bottom:1.25rem;left:15%;padding-top:1.25rem;padding-bottom:1.25rem;color:#fff;text-align:center}.carousel-dark .carousel-control-prev-icon,.carousel-dark .carousel-control-next-icon{filter:invert(1) grayscale(100)}.carousel-dark .carousel-indicators [data-bs-target]{background-color:#000}.carousel-dark .carousel-caption{color:#000}[data-bs-theme=dark] .carousel .carousel-control-prev-icon,[data-bs-theme=dark] .carousel .carousel-control-next-icon,[data-bs-theme=dark].carousel .carousel-control-prev-icon,[data-bs-theme=dark].carousel .carousel-control-next-icon{filter:invert(1) grayscale(100)}[data-bs-theme=dark] .carousel .carousel-indicators [data-bs-target],[data-bs-theme=dark].carousel .carousel-indicators [data-bs-target]{background-color:#000}[data-bs-theme=dark] .carousel .carousel-caption,[data-bs-theme=dark].carousel .carousel-caption{color:#000}.carousel:focus-visible{outline:rgba(0,0,0,0);box-shadow:0 0 0 2px #fff,0 0 0 4px #000,0 0 12px 5px rgba(0,0,0,.24)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.carousel:focus-visible{border-radius:4px;outline:2px solid highlight;outline-offset:.25rem;box-shadow:none}}.carousel-inner{padding-bottom:calc(10% - .5rem)}@media(max-width: 599.98px){.carousel-inner{padding-bottom:1.5rem}}@media(max-width: 779.98px){.carousel-inner{padding-bottom:calc(10% - 1rem)}}.carousel-inner img{aspect-ratio:16/9;object-fit:cover}.carousel-caption{bottom:-5rem;left:0;width:40%;padding:2rem;padding-bottom:5rem;color:#fff;text-align:left}@media(min-width: 1024px){.carousel-caption{bottom:-7rem}}@media(max-width: 1023.98px){.carousel-caption{width:50%;padding:1.5rem;padding-bottom:5rem}}@media(max-width: 779.98px){.carousel-caption{width:55%}}@media(max-width: 599.98px){.carousel-caption{position:relative;bottom:0;width:75%;margin-top:-7rem}}@media(max-width: 399.98px){.carousel-caption{width:calc(100% - 2rem);margin-top:-3rem;margin-left:1rem}}.carousel-caption .bold{margin-bottom:0;font-size:1.75rem;font-weight:700}.carousel-caption .subtitle,.carousel-caption .light{font-size:1.75rem;font-weight:300}.carousel-caption::before{content:"";position:absolute;z-index:0;bottom:3rem;left:0;width:192px;border-bottom:10px solid #fc0}@media(max-width: 1023.98px){.carousel-caption::before{bottom:2.5rem}}.caption-right .carousel-caption{right:0;left:auto}.caption-light .carousel-caption{background-color:rgba(250,249,248,.85);color:#000}.carousel-indicators{right:2%;bottom:3.5rem;left:inherit;margin:0;float:right;text-align:right}@media(max-width: 1023.98px){.carousel-indicators{bottom:2rem}}@media(max-width: 599.98px){.carousel-indicators{bottom:1.5rem}}@media(max-width: 399.98px){.carousel-indicators{right:0;bottom:.8rem;left:0}}.caption-right .carousel-indicators{right:auto;left:2%;float:left;text-align:left}.carousel-indicators [data-bs-target]{width:.75rem;height:.75rem;border:1px #000 solid;border-radius:50%;background-color:rgba(0,0,0,0)}.carousel-indicators [data-bs-target]:not(:last-child){margin-right:1rem}.carousel-indicators [data-bs-target].active{border-color:#fc0;background-color:#fc0}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.carousel-indicators [data-bs-target].active{border-color:highlight;background-color:highlight}}.carousel-control-prev,.carousel-control-next{display:none}
1
+ .carousel{position:relative}.carousel.pointer-event{touch-action:pan-y}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-inner::after{display:block;clear:both;content:""}.carousel-item{position:relative;display:none;float:left;width:100%;margin-right:-100%;backface-visibility:hidden;transition:transform .6s ease-in-out}@media(prefers-reduced-motion: reduce){.carousel-item{transition:none}}.carousel-item.active,.carousel-item-next,.carousel-item-prev{display:block}.carousel-item-next:not(.carousel-item-start),.active.carousel-item-end{transform:translateX(100%)}.carousel-item-prev:not(.carousel-item-end),.active.carousel-item-start{transform:translateX(-100%)}.carousel-fade .carousel-item{opacity:0;transition-property:opacity;transform:none}.carousel-fade .carousel-item.active,.carousel-fade .carousel-item-next.carousel-item-start,.carousel-fade .carousel-item-prev.carousel-item-end{z-index:1;opacity:1}.carousel-fade .active.carousel-item-start,.carousel-fade .active.carousel-item-end{z-index:0;opacity:0;transition:opacity 0s .6s}@media(prefers-reduced-motion: reduce){.carousel-fade .active.carousel-item-start,.carousel-fade .active.carousel-item-end{transition:none}}.carousel-control-prev,.carousel-control-next{position:absolute;top:0;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff;text-align:center;background:none;border:0;opacity:.5;transition:opacity .15s ease}@media(prefers-reduced-motion: reduce){.carousel-control-prev,.carousel-control-next{transition:none}}.carousel-control-prev:hover,.carousel-control-prev:focus,.carousel-control-next:hover,.carousel-control-next:focus{color:#fff;text-decoration:none;outline:0;opacity:.9}.carousel-control-prev{left:0}.carousel-control-next{right:0}.carousel-control-prev-icon,.carousel-control-next-icon{display:inline-block;width:20px;height:20px;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.carousel-control-prev-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e")*/}.carousel-control-next-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e")*/}.carousel-indicators{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;justify-content:center;padding:0;margin-right:15%;margin-bottom:1rem;margin-left:15%}.carousel-indicators [data-bs-target]{box-sizing:content-box;flex:0 1 auto;width:30px;height:3px;padding:0;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:#fff;background-clip:padding-box;border:0;border-top:10px solid rgba(0,0,0,0);border-bottom:10px solid rgba(0,0,0,0);opacity:.5;transition:opacity .6s ease}@media(prefers-reduced-motion: reduce){.carousel-indicators [data-bs-target]{transition:none}}.carousel-indicators .active{opacity:1}.carousel-caption{position:absolute;right:15%;bottom:1.25rem;left:15%;padding-top:1.25rem;padding-bottom:1.25rem;color:#fff;text-align:center}.carousel-dark .carousel-control-prev-icon,.carousel-dark .carousel-control-next-icon{filter:invert(1) grayscale(100)}.carousel-dark .carousel-indicators [data-bs-target]{background-color:#000}.carousel-dark .carousel-caption{color:#000}[data-bs-theme=dark] .carousel .carousel-control-prev-icon,[data-bs-theme=dark] .carousel .carousel-control-next-icon,[data-bs-theme=dark].carousel .carousel-control-prev-icon,[data-bs-theme=dark].carousel .carousel-control-next-icon{filter:invert(1) grayscale(100)}[data-bs-theme=dark] .carousel .carousel-indicators [data-bs-target],[data-bs-theme=dark].carousel .carousel-indicators [data-bs-target]{background-color:#000}[data-bs-theme=dark] .carousel .carousel-caption,[data-bs-theme=dark].carousel .carousel-caption{color:#000}.carousel:focus-visible{outline:rgba(0,0,0,0);box-shadow:0 0 0 2px #fff,0 0 0 4px #000,0 0 12px 5px rgba(0,0,0,.24)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.carousel:focus-visible{border-radius:4px;outline:2px solid highlight;outline-offset:.25rem;box-shadow:none}}.carousel-inner{padding-bottom:calc(10% - .5rem)}@media(max-width: 599.98px){.carousel-inner{padding-bottom:1.5rem}}@media(max-width: 779.98px){.carousel-inner{padding-bottom:calc(10% - 1rem)}}.carousel-inner img{aspect-ratio:16/9;object-fit:cover}.carousel-caption{bottom:-5rem;left:0;width:40%;padding:2rem;padding-bottom:5rem;color:#fff;text-align:left}@media(min-width: 1024px){.carousel-caption{bottom:-7rem}}@media(max-width: 1023.98px){.carousel-caption{width:50%;padding:1.5rem;padding-bottom:5rem}}@media(max-width: 779.98px){.carousel-caption{width:55%}}@media(max-width: 599.98px){.carousel-caption{position:relative;bottom:0;width:calc(100% - 2rem);margin-top:-3rem;margin-left:1rem}}.carousel-caption .bold{margin-bottom:0;font-size:1.75rem;font-weight:700}.carousel-caption .subtitle,.carousel-caption .light{font-size:1.75rem;font-weight:300}.carousel-caption::before{content:"";position:absolute;z-index:0;bottom:3rem;left:0;width:192px;border-bottom:10px solid #fc0}@media(max-width: 1023.98px){.carousel-caption::before{bottom:2.5rem}}.caption-right .carousel-caption{right:0;left:auto}.caption-light .carousel-caption{background-color:rgba(250,249,248,.85);color:#000}.carousel-indicators{right:2%;bottom:3.5rem;left:inherit;margin:0;float:right;text-align:right}@media(max-width: 1023.98px){.carousel-indicators{bottom:2rem}}@media(max-width: 599.98px){.carousel-indicators{right:0;bottom:.8rem;left:0}}.caption-right .carousel-indicators{right:auto;left:2%;float:left;text-align:left}.carousel-indicators [data-bs-target]{width:.75rem;height:.75rem;border:1px #000 solid;border-radius:50%;background-color:rgba(0,0,0,0)}.carousel-indicators [data-bs-target]:not(:last-child){margin-right:1rem}.carousel-indicators [data-bs-target].active{border-color:#fc0;background-color:#fc0}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.carousel-indicators [data-bs-target].active{border-color:highlight;background-color:highlight}}.carousel-control-prev,.carousel-control-next{display:none}
package/components/carousel.scss CHANGED
@@ -32,7 +32,7 @@
32
32
  .carousel-inner {
33
33
  padding-bottom: calc(10% - 0.5rem);
34
34
 
35
- @include media-breakpoint-down(rg) {
35
+ @include media-breakpoint-down(sm) {
36
36
  padding-bottom: 1.5rem;
37
37
  }
38
38
 
@@ -69,14 +69,9 @@
69
69
  width: 55%;
70
70
  }
71
71
 
72
- @include media-breakpoint-down(rg) {
72
+ @include media-breakpoint-down(sm) {
73
73
  position: relative;
74
74
  bottom: 0;
75
- width: 75%;
76
- margin-top: -7rem;
77
- }
78
-
79
- @include media-breakpoint-down(sm) {
80
75
  width: calc(100% - 2rem);
81
76
  margin-top: -3rem;
82
77
  margin-left: 1rem;
@@ -131,10 +126,6 @@
131
126
  bottom: 2rem;
132
127
  }
133
128
 
134
- @include media-breakpoint-down(rg) {
135
- bottom: 1.5rem;
136
- }
137
-
138
129
  @include media-breakpoint-down(sm) {
139
130
  right: 0;
140
131
  bottom: 0.8rem;
package/components/checkbox.css ADDED
@@ -0,0 +1 @@
1
+ .form-check{display:flex;flex-wrap:wrap;align-items:flex-start;width:-moz-fit-content;width:fit-content;border-radius:var(--post-device-border-radius-focus)}.form-check-inline{display:inline-flex;vertical-align:top}fieldset>.form-check-inline:not(:last-of-type){margin-right:1.5rem}.form-check:has(>input:not(:only-child)){outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.form-check:has(>input:not(:only-child)):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:has(>input:not(:only-child)):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.form-check:has(>input:not(:only-child)):is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:has(>input:not(:only-child)):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.form-check:has(>input:not(:only-child))>input{outline:none !important}.form-check:has(input[type=checkbox]):not(.form-switch){padding-block:var(--post-device-spacing-padding-block-19)}fieldset>.form-check:has(input[type=checkbox]):not(.form-switch):not(:last-of-type){margin-bottom:var(--post-device-spacing-gap-4)}.form-check:has(input[type=checkbox]):not(.form-switch)>input[type=checkbox]~label{padding-block:var(--post-device-spacing-padding-block-20);padding-inline-start:var(--post-device-spacing-gap-inline-12);color:var(--post-scheme-color-interactive-primary-enabled-fg1)}.form-check:has(input[type=checkbox]):not(.form-switch)>input[type=checkbox]:not([disabled])~label{cursor:pointer}.form-check:has(input[type=checkbox]):not(.form-switch)>input[type=checkbox]:not([disabled]):hover~label{color:var(--post-scheme-color-interactive-primary-hover-fg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:has(input[type=checkbox]):not(.form-switch)>input[type=checkbox]:not([disabled]):hover~label{color:Highlight}}.form-check:has(input[type=checkbox]):not(.form-switch)>input[type=checkbox][disabled]~label{color:var(--post-scheme-color-interactive-primary-disabled-fg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:has(input[type=checkbox]):not(.form-switch)>input[type=checkbox][disabled]~label{color:GrayText}}.form-check.form-switch>input[type=checkbox]~label{color:var(--post-scheme-color-interactive-primary-enabled-fg1)}.form-check.form-switch>input[type=checkbox]:not([disabled])~label{cursor:pointer}.form-check.form-switch>input[type=checkbox]:not([disabled]):hover~label{color:var(--post-scheme-color-interactive-primary-hover-bg2)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check.form-switch>input[type=checkbox]:not([disabled]):hover~label{color:Highlight}}.form-check.form-switch>input[type=checkbox][disabled]~label{color:var(--post-scheme-color-interactive-primary-disabled-bg3)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check.form-switch>input[type=checkbox][disabled]~label{color:GrayText}}.form-check:has(input[type=radio]){padding-block:var(--post-device-spacing-padding-block-19)}fieldset>.form-check:has(input[type=radio]):not(:last-of-type){margin-bottom:var(--post-device-spacing-gap-4)}.form-check:has(input[type=radio])>input[type=radio]~label{padding-block:var(--post-device-spacing-padding-block-20);padding-inline-start:var(--post-device-spacing-gap-inline-12);color:var(--post-scheme-color-interactive-primary-enabled-fg1)}.form-check:has(input[type=radio])>input[type=radio]:not([disabled])~label{cursor:pointer}.form-check:has(input[type=radio])>input[type=radio]:not([disabled]):hover~label{color:var(--post-scheme-color-interactive-primary-hover-fg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:has(input[type=radio])>input[type=radio]:not([disabled]):hover~label{color:Highlight}}.form-check:has(input[type=radio])>input[type=radio][disabled]~label{color:var(--post-scheme-color-interactive-primary-disabled-fg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:has(input[type=radio])>input[type=radio][disabled]~label{color:GrayText}}.form-check>label{transition:color 250ms cubic-bezier(0.4, 0, 0.2, 1);flex:1}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check>label{transition:none}}:where(.form-check>input[type=checkbox]){outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}:where(.form-check>input[type=checkbox]):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:where(.form-check>input[type=checkbox]):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:where(.form-check>input[type=checkbox]):is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:where(.form-check>input[type=checkbox]):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.form-check:not(.form-switch):has(input[type=checkbox])>input{appearance:none;flex:none;display:inline-flex;margin:var(--post-device-spacing-padding-1);margin-block:calc(var(--post-device-spacing-padding-1) + var(--post-device-spacing-padding-block-18));width:var(--post-device-sizing-interactive-icon-size);height:var(--post-device-sizing-interactive-icon-size);background-color:var(--post-scheme-color-interactive-primary-enabled-bg1);border:var(--post-device-border-width-default) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-primary-enabled-stroke);border-radius:var(--post-core-dimension-2);color:var(--post-scheme-color-interactive-primary-enabled-fg1);vertical-align:top;transition:background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),border-color 250ms cubic-bezier(0.4, 0, 0.2, 1),color 250ms cubic-bezier(0.4, 0, 0.2, 1),box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:not(.form-switch):has(input[type=checkbox])>input{background-color:Field;border-color:FieldText;color:FieldText}}.form-check:not(.form-switch):has(input[type=checkbox])>input:not([disabled]){cursor:pointer}.form-check:not(.form-switch):has(input[type=checkbox])>input::after{display:block;content:"";width:100%;height:100%;-webkit-mask-size:var(--post-device-sizing-interactive-icon-size);mask-size:var(--post-device-sizing-interactive-icon-size);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}.form-check:not(.form-switch):has(input[type=checkbox])>input:checked::after,.form-check:not(.form-switch):has(input[type=checkbox])>input:indeterminate::after{background-color:currentColor}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:not(.form-switch):has(input[type=checkbox])>input:checked::after,.form-check:not(.form-switch):has(input[type=checkbox])>input:indeterminate::after{background-color:FieldText}}.form-check:not(.form-switch):has(input[type=checkbox])>input:not([disabled]):hover{background-color:var(--post-scheme-color-interactive-primary-hover-bg);border-color:var(--post-scheme-color-interactive-primary-hover-stroke);color:var(--post-scheme-color-interactive-primary-hover-fg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:not(.form-switch):has(input[type=checkbox])>input:not([disabled]):hover{background-color:Field;border-color:Highlight}.form-check:not(.form-switch):has(input[type=checkbox])>input:not([disabled]):hover:checked::after,.form-check:not(.form-switch):has(input[type=checkbox])>input:not([disabled]):hover:indeterminate::after{background-color:Highlight}}.form-check:not(.form-switch):has(input[type=checkbox])>input:checked::after{-webkit-mask-image:url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='M7.51712 12.1332L4.30712 8.69325C4.02712 8.39325 4.03712 7.91325 4.34712 7.63325C4.64712 7.35325 5.12712 7.36325 5.40712 7.67325L7.31712 9.72325L10.7171 4.57325C10.9471 4.22325 11.4071 4.13325 11.7571 4.36325C12.1071 4.59325 12.1971 5.05325 11.9671 5.40325L7.51712 12.1332Z'/></svg>");mask-image:url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='M7.51712 12.1332L4.30712 8.69325C4.02712 8.39325 4.03712 7.91325 4.34712 7.63325C4.64712 7.35325 5.12712 7.36325 5.40712 7.67325L7.31712 9.72325L10.7171 4.57325C10.9471 4.22325 11.4071 4.13325 11.7571 4.36325C12.1071 4.59325 12.1971 5.05325 11.9671 5.40325L7.51712 12.1332Z'/></svg>")}.form-check:not(.form-switch):has(input[type=checkbox])>input:indeterminate::after{-webkit-mask-image:url("data:image/svg+xml,<svg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='M11.21 8.5H4.75C4.34 8.5 4 8.16 4 7.75C4 7.34 4.34 7 4.75 7H11.21C11.62 7 11.96 7.34 11.96 7.75C11.96 8.16 11.62 8.5 11.21 8.5Z'/></svg>");mask-image:url("data:image/svg+xml,<svg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='M11.21 8.5H4.75C4.34 8.5 4 8.16 4 7.75C4 7.34 4.34 7 4.75 7H11.21C11.62 7 11.96 7.34 11.96 7.75C11.96 8.16 11.62 8.5 11.21 8.5Z'/></svg>")}.form-check:not(.form-switch):has(input[type=checkbox])>input[disabled]{background-color:var(--post-scheme-color-interactive-primary-disabled-bg);border:var(--post-device-border-width-default) var(--post-core-border-style-dash) var(--post-scheme-color-interactive-primary-disabled-stroke);color:var(--post-scheme-color-interactive-primary-disabled-fg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:not(.form-switch):has(input[type=checkbox])>input[disabled]{background-color:Field;border-color:GrayText}.form-check:not(.form-switch):has(input[type=checkbox])>input[disabled]:checked::after,.form-check:not(.form-switch):has(input[type=checkbox])>input[disabled]:indeterminate::after{background-color:GrayText}}
package/components/checkbox.scss ADDED
@@ -0,0 +1,127 @@
1
+ @use 'form-check';
2
+ @use '../variables/color';
3
+ @use '../variables/animation';
4
+ @use '../mixins/color' as color-mx;
5
+ @use '../mixins/icons' as icons-mx;
6
+ @use '../mixins/utilities' as utility-mx;
7
+ @use '../tokens/components';
8
+ @use '../functions/tokens';
9
+
10
+ tokens.$default-map: components.$post-checkbox;
11
+
12
+ $checkbox-icon-checked: url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='M7.51712 12.1332L4.30712 8.69325C4.02712 8.39325 4.03712 7.91325 4.34712 7.63325C4.64712 7.35325 5.12712 7.36325 5.40712 7.67325L7.31712 9.72325L10.7171 4.57325C10.9471 4.22325 11.4071 4.13325 11.7571 4.36325C12.1071 4.59325 12.1971 5.05325 11.9671 5.40325L7.51712 12.1332Z'/></svg>");
13
+ $checkbox-icon-indeterminate: url("data:image/svg+xml,<svg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='M11.21 8.5H4.75C4.34 8.5 4 8.16 4 7.75C4 7.34 4.34 7 4.75 7H11.21C11.62 7 11.96 7.34 11.96 7.75C11.96 8.16 11.62 8.5 11.21 8.5Z'/></svg>");
14
+
15
+ :where(.form-check > input[type='checkbox']) {
16
+ @include utility-mx.focus-style();
17
+ }
18
+
19
+ .form-check:not(.form-switch):has(input[type='checkbox']) {
20
+ > input {
21
+ appearance: none;
22
+ flex: none;
23
+ display: inline-flex;
24
+ margin: tokens.get('checkbox-icon-padding-inner');
25
+ margin-block: calc(
26
+ tokens.get('checkbox-icon-padding-inner') + tokens.get('checkbox-icon-padding-container')
27
+ );
28
+ width: tokens.get('checkbox-icon-size');
29
+ height: tokens.get('checkbox-icon-size');
30
+ background-color: tokens.get('checkbox-enabled-bg');
31
+ border: tokens.get('checkbox-icon-border-width') tokens.get('checkbox-border-style-default')
32
+ tokens.get('checkbox-enabled-stroke');
33
+ border-radius: tokens.get('checkbox-border-radius');
34
+ color: tokens.get('checkbox-enabled-fg');
35
+ vertical-align: top;
36
+ transition:
37
+ background-color #{animation.$transition-base-timing},
38
+ border-color #{animation.$transition-base-timing},
39
+ color #{animation.$transition-base-timing},
40
+ box-shadow #{animation.$transition-base-timing};
41
+
42
+ @include utility-mx.high-contrast-mode() {
43
+ background-color: Field;
44
+ border-color: FieldText;
45
+ color: FieldText;
46
+ }
47
+
48
+ &:not([disabled]) {
49
+ cursor: pointer;
50
+ }
51
+
52
+ &::after {
53
+ display: block;
54
+ content: '';
55
+ width: 100%;
56
+ height: 100%;
57
+ -webkit-mask-size: tokens.get('checkbox-icon-size');
58
+ mask-size: tokens.get('checkbox-icon-size');
59
+ -webkit-mask-repeat: no-repeat;
60
+ mask-repeat: no-repeat;
61
+ -webkit-mask-position: center;
62
+ mask-position: center;
63
+ }
64
+
65
+ &:checked,
66
+ &:indeterminate {
67
+ &::after {
68
+ background-color: currentColor;
69
+
70
+ @include utility-mx.high-contrast-mode() {
71
+ background-color: FieldText;
72
+ }
73
+ }
74
+ }
75
+
76
+ &:not([disabled]):hover {
77
+ background-color: tokens.get('checkbox-hover-bg');
78
+ border-color: tokens.get('checkbox-hover-stroke');
79
+ color: tokens.get('checkbox-hover-fg');
80
+
81
+ @include utility-mx.high-contrast-mode() {
82
+ background-color: Field;
83
+ border-color: Highlight;
84
+
85
+ &:checked,
86
+ &:indeterminate {
87
+ &::after {
88
+ background-color: Highlight;
89
+ }
90
+ }
91
+ }
92
+ }
93
+
94
+ &:checked {
95
+ &::after {
96
+ -webkit-mask-image: $checkbox-icon-checked;
97
+ mask-image: $checkbox-icon-checked;
98
+ }
99
+ }
100
+
101
+ &:indeterminate {
102
+ &::after {
103
+ -webkit-mask-image: $checkbox-icon-indeterminate;
104
+ mask-image: $checkbox-icon-indeterminate;
105
+ }
106
+ }
107
+
108
+ &[disabled] {
109
+ background-color: tokens.get('checkbox-disabled-bg');
110
+ border: tokens.get('checkbox-icon-border-width') tokens.get('checkbox-border-style-disabled')
111
+ tokens.get('checkbox-disabled-stroke');
112
+ color: tokens.get('checkbox-disabled-fg');
113
+
114
+ @include utility-mx.high-contrast-mode() {
115
+ background-color: Field;
116
+ border-color: GrayText;
117
+
118
+ &:checked,
119
+ &:indeterminate {
120
+ &::after {
121
+ background-color: GrayText;
122
+ }
123
+ }
124
+ }
125
+ }
126
+ }
127
+ }