{"version":3,"file":"checkbox.css.cjs","names":[],"sources":["../../../src/inputs/checkbox/checkbox.css?inline"],"sourcesContent":["@layer refine.base {\n  /* ========================================\n       Base Styles & Defaults\n       ======================================== */\n\n  :host {\n    --_size: var(--checkbox-size, var(--size-5));\n    --_radius: var(--checkbox-radius, var(--rounded-lg));\n    --_font-size: var(--checkbox-font-size, var(--text-sm));\n    --_bg: var(--checkbox-bg, var(--color-contrast-200));\n    --_border: var(--checkbox-border-color, var(--color-contrast-300));\n\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--_gap, var(--size-2));\n    align-items: center;\n    min-height: var(--_touch-target);\n    cursor: pointer;\n    user-select: none;\n  }\n\n  .checkbox-wrapper {\n    position: relative;\n    display: block;\n    flex-shrink: 0;\n    width: var(--_size);\n    height: var(--_size);\n  }\n\n  .box {\n    position: relative;\n    box-sizing: border-box;\n    width: var(--_size);\n    height: var(--_size);\n    background: var(--_bg);\n    border: var(--border-2) solid var(--_border);\n    border-radius: var(--_radius);\n    transition:\n      background var(--transition-normal),\n      border-color var(--transition-normal),\n      box-shadow var(--transition-normal);\n  }\n\n  /* ========================================\n       Focus State\n       ======================================== */\n\n  :host(:focus-visible) .box {\n    box-shadow: var(--_focus-shadow);\n  }\n\n  /* ========================================\n       Icons (Checkmark & Dash)\n       ======================================== */\n\n  .checkmark,\n  .dash {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    color: var(--_icon-color);\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.5);\n    transition:\n      opacity var(--transition-spring),\n      transform var(--transition-spring);\n  }\n\n  .checkmark::part(svg),\n  .dash::part(svg) {\n    width: calc(var(--_size) * 0.6);\n    height: calc(var(--_size) * 0.6);\n    fill: none;\n    stroke: currentcolor;\n    stroke-width: 3;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n  }\n\n  /* ========================================\n       Label\n       ======================================== */\n\n  .label {\n    font-size: var(--_font-size);\n    color: var(--color-contrast);\n  }\n\n  /* ========================================\n       Helper / Error Text\n       ======================================== */\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    width: 100%;\n    padding-inline-start: calc(var(--_size) + var(--size-2));\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));\n  }\n\n  .helper-text[role='alert'] {\n    color: var(--color-error);\n  }\n}\n\n@layer refine.overrides {\n  /* Map theme variables to checkbox-specific variables */\n  :host {\n    --_active-bg: var(--checkbox-checked-bg, var(--_theme-base));\n    --_icon-color: var(--checkbox-color, var(--_theme-contrast));\n    --_focus-shadow: var(--_theme-shadow);\n  }\n\n  /* ========================================\n       Checked & Indeterminate States\n       ======================================== */\n\n  :host([checked]) .box,\n  :host([indeterminate]) .box {\n    background: var(--_active-bg);\n    border-color: var(--_active-bg);\n  }\n\n  :host([checked]) .checkmark,\n  :host([indeterminate]:not([checked])) .dash {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n"],"mappings":""}