@postenbring/hedwig-css/dist/checkbox.css.map

Styles for [Hedwig Design System](https://github.com/bring/hedwig-design-system).

{"version":3,"sourceRoot":null,"mappings":"AAAA,6EAMA,yWAiBE,+BAIA,sHAKA,2FAYA,gFAUA,oMASA,wFAIA,kNAgBA,8VAUE,6FAIA,uIAMA,4GAAA,kHAUA,2HAAA,iIAOF,mGAIE,gIAMF","sources":["home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/form/checkbox/checkbox.css"],"sourcesContent":[".hds-checkbox-wrapper {\n  display: flex;\n  flex-flow: column nowrap;\n  gap: var(--hds-spacing-8);\n}\n\n.hds-checkbox {\n  --checkmark-width: 16px;\n  --checkmark-margin: var(--hds-spacing-4);\n\n  display: block;\n  padding: 0 0 0\n    calc(var(--checkmark-width) + (var(--checkmark-margin) * 2) + var(--hds-spacing-12));\n  border-radius: var(--hds-border-radius);\n  font: var(--hds-typography-body-small);\n  position: relative;\n  cursor: pointer;\n\n  /**\n   * To avoid unexpected behavior of focus when clicking the checkbox text\n   */\n  user-select: none;\n\n  * {\n    cursor: pointer;\n  }\n\n  .hds-checkbox__title {\n    font-weight: var(--hds-font-weight-body-title);\n    padding-bottom: var(--hds-spacing-12);\n  }\n\n  label::after {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n  }\n\n  /**\n  * Hide the browser default checkbox\n  */\n  input[type=\"checkbox\"] {\n    position: absolute;\n    opacity: 0;\n    height: 0;\n    width: 0;\n  }\n\n  /**\n  * Create a custom checkbox\n  */\n  .hds-checkbox__checkmark {\n    margin: var(--checkmark-margin);\n    position: absolute;\n    left: 0;\n    height: var(--checkmark-width);\n    width: var(--checkmark-width);\n    border: solid 2px var(--hds-colors-darker);\n  }\n\n  input[type=\"checkbox\"]:checked ~ .hds-checkbox__checkmark::after {\n    display: block;\n  }\n\n  .hds-checkbox__checkmark::after {\n    content: \"\";\n    position: absolute;\n    display: none;\n    left: 4px;\n    top: 1px;\n    width: 4px;\n    height: 8px;\n    border: solid var(--hds-colors-dark);\n    border-width: 0 2px 2px 0;\n    transform: rotate(45deg);\n  }\n\n  /**\n  * Variant bounding-box and state error\n  */\n  &.hds-checkbox--bounding-box {\n    background-color: var(--hds-colors-lighter);\n    padding: calc(var(--hds-spacing-16) - 1px) var(--hds-spacing-32)\n      calc(var(--hds-spacing-16) - 1px)\n      calc(\n        var(--hds-spacing-16) + var(--checkmark-width) + (var(--checkmark-margin) * 2) +\n          var(--hds-spacing-12)\n      );\n    border: solid var(--hds-stroke-default) var(--hds-colors-lighter);\n\n    .hds-checkbox__checkmark {\n      left: var(--hds-spacing-16);\n    }\n\n    &.hds-checkbox--error {\n      border: solid var(--hds-stroke-default) var(--hds-ui-colors-warning-yellow);\n    }\n  }\n\n  &.hds-checkbox--error {\n    .hds-checkbox__checkmark,\n    .hds-checkbox__checkmark::after {\n      border-color: var(--hds-ui-colors-warning-yellow);\n    }\n  }\n\n  /**\n  * State: Disabled\n  */\n  input[type=\"checkbox\"]:disabled {\n    ~ .hds-checkbox__checkmark,\n    ~ .hds-checkbox__checkmark::after {\n      border-color: var(--hds-ui-colors-grey);\n      cursor: default;\n    }\n  }\n\n  &.hds-checkbox:has(input:disabled) {\n    cursor: default;\n    color: var(--hds-ui-colors-dark-grey);\n\n    &.hds-checkbox--bounding-box {\n      background-color: var(--hds-ui-colors-light-grey-fill);\n    }\n  }\n\n  /* Focus effect */\n  &:has(input[type=\"checkbox\"]:focus-visible) {\n    outline: 2px solid var(--hds-colors-dark);\n    outline-offset: 2px;\n  }\n}\n"],"names":[]}