{"version":3,"file":"menu-item.css.cjs","names":[],"sources":["../../../src/overlay/menu/menu-item.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_menu-color: var(--menu-item-color, var(--_theme-base, var(--color-primary)));\n    --_hover-bg: var(--menu-item-hover-bg, var(--color-contrast-100));\n    --_focus-color: var(--menu-item-focus-color, var(--_menu-color));\n    --_focus-bg: var(--menu-item-focus-bg, color-mix(in oklch, var(--_menu-color) 12%, var(--color-contrast-100)));\n    --_selection-bg: var(\n      --menu-item-selection-bg,\n      color-mix(in oklch, var(--color-contrast-900) 5%, var(--color-canvas))\n    );\n    --_checked-color: var(--menu-item-checked-color, var(--_menu-color));\n    --_checked-bg: var(--menu-item-checked-bg, color-mix(in oklch, var(--_menu-color) 18%, var(--color-canvas)));\n\n    display: block;\n    outline: none;\n  }\n\n  .item {\n    display: flex;\n    gap: var(--_gap, var(--size-2));\n    align-items: center;\n    padding: var(--_item-padding, var(--size-1-5) var(--size-3));\n    font-size: var(--_font-size, var(--text-sm));\n    line-height: var(--leading-normal);\n    white-space: nowrap;\n    cursor: pointer;\n    user-select: none;\n    border-radius: 0;\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  :host(:first-of-type) .item {\n    border-radius: var(--rounded-sm) var(--rounded-sm) 0 0;\n  }\n\n  :host(:last-child) .item {\n    border-radius: 0 0 var(--rounded-sm) var(--rounded-sm);\n  }\n\n  :host(:first-of-type:last-child) .item {\n    border-radius: var(--rounded-sm);\n  }\n\n  :host(:not([disabled])) .item:hover {\n    background: var(--_hover-bg);\n  }\n\n  :host(:focus-visible) .item {\n    color: var(--_focus-color);\n    background: var(--_focus-bg);\n  }\n\n  .item.is-checked {\n    font-weight: var(--font-medium);\n    color: var(--_checked-color);\n  }\n\n  :host([disabled]) .item {\n    color: var(--color-contrast-400);\n    pointer-events: none;\n    cursor: not-allowed;\n    opacity: 0.6;\n  }\n\n  .icon-slot {\n    display: contents;\n  }\n\n  .item-check {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: 1.25rem;\n    color: currentcolor;\n  }\n\n  /* CSS-based check/radio indicator — no Unicode characters */\n  .item-check::before {\n    display: block;\n    width: 0.875rem;\n    height: 0.875rem;\n    content: '';\n    border: 1.5px solid currentcolor;\n    transition:\n      background var(--transition-fast),\n      border-color var(--transition-fast);\n  }\n\n  .item.is-checkbox .item-check::before {\n    border-radius: 2px;\n  }\n\n  .item.is-radio .item-check::before {\n    border-radius: 50%;\n  }\n\n  .item.is-checked .item-check::before {\n    background: currentcolor;\n  }\n\n  /* Radio checked: filled dot via inset box-shadow */\n  .item.is-radio.is-checked .item-check::before {\n    background: transparent;\n    box-shadow: inset 0 0 0 3px currentcolor;\n  }\n\n  .item-label {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n\n@media (pointer: coarse) {\n  .item {\n    padding: var(--size-2-5) var(--size-3);\n  }\n}\n"],"mappings":""}