{"version":3,"file":"drawer.css.cjs","names":[],"sources":["../../../src/overlay/drawer/drawer.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_backdrop-bg: var(--drawer-backdrop-bg, color-mix(in oklch, var(--color-canvas) 40%, transparent));\n    --_backdrop-filter: none;\n    --_panel-bg: var(--drawer-bg, var(--color-canvas));\n    --_panel-blur: var(--drawer-panel-blur, var(--blur-md));\n    --_panel-shadow: var(--drawer-shadow, var(--shadow-xl));\n    --_panel-border-color: var(--color-divider);\n    --_panel-bleed: var(--size-8);\n    --_drag-handle-inset: calc(var(--size-1) * -1);\n\n    display: contents;\n  }\n\n  dialog {\n    all: unset;\n    position: fixed;\n    inset: 0;\n    box-sizing: border-box;\n    display: flex;\n    width: 100%;\n    max-width: 100%;\n    height: 100%;\n    max-height: 100%;\n    pointer-events: none;\n    transition:\n      display 200ms allow-discrete,\n      overlay 200ms allow-discrete;\n  }\n\n  dialog:not([open]) {\n    display: none;\n  }\n\n  dialog:not([open]) .panel {\n    display: none;\n  }\n\n  dialog[open] {\n    display: flex;\n    pointer-events: auto;\n  }\n\n  dialog::backdrop {\n    background: var(--_backdrop-bg);\n    opacity: 1;\n    backdrop-filter: var(--_backdrop-filter);\n    transition:\n      display 200ms allow-discrete,\n      overlay 200ms allow-discrete,\n      opacity var(--transition-normal),\n      backdrop-filter var(--transition-normal);\n\n    @starting-style {\n      opacity: 0;\n      backdrop-filter: blur(0);\n    }\n  }\n\n  dialog.closing::backdrop {\n    opacity: 0;\n    backdrop-filter: blur(0);\n    transition:\n      opacity 300ms var(--ease-in-out),\n      backdrop-filter 300ms var(--ease-in-out),\n      overlay 300ms allow-discrete,\n      display 300ms allow-discrete;\n  }\n\n  .panel {\n    position: absolute;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    overflow: visible;\n    background: var(--_panel-bg);\n    border: var(--border) solid var(--_panel-border-color);\n    box-shadow: var(--_panel-shadow);\n    opacity: 1;\n    backdrop-filter: blur(var(--_panel-blur));\n    transform: translate3d(0, 0, 0);\n    transition:\n      opacity var(--transition-normal),\n      transform 300ms var(--ease-move);\n\n    @starting-style {\n      opacity: 0;\n      transform: var(--_panel-exit-transform, translate3d(0, 0, 0));\n    }\n  }\n\n  dialog.closing .panel {\n    opacity: 0;\n    transform: var(--_panel-exit-transform, translate3d(0, 0, 0));\n  }\n\n  /* left */\n  :host([placement='left']) .panel {\n    --_panel-exit-transform: translateX(calc(-100% - var(--_panel-bleed)));\n\n    inset-block: 0;\n    inset-inline-start: 0;\n    width: calc(var(--drawer-size, 20rem) + var(--_panel-bleed));\n    max-width: calc(100dvw + var(--_panel-bleed));\n    padding-inline-start: var(--_panel-bleed);\n    margin-inline-start: calc(var(--_panel-bleed) * -1);\n    border-block: none;\n    border-inline-start: none;\n  }\n\n  /* right (default) */\n  :host(:not([placement])) .panel,\n  :host([placement='right']) .panel {\n    --_panel-exit-transform: translateX(calc(100% + var(--_panel-bleed)));\n\n    inset-block: 0;\n    inset-inline-end: 0;\n    width: calc(var(--drawer-size, 20rem) + var(--_panel-bleed));\n    max-width: calc(100dvw + var(--_panel-bleed));\n    padding-inline-end: var(--_panel-bleed);\n    margin-inline-end: calc(var(--_panel-bleed) * -1);\n    border-block: none;\n    border-inline-end: none;\n  }\n\n  /* top */\n  :host([placement='top']) .panel {\n    --_panel-exit-transform: translateY(calc(-100% - var(--_panel-bleed)));\n\n    inset-block-start: 0;\n    inset-inline: 0;\n    height: calc(var(--drawer-size, 16rem) + var(--_panel-bleed));\n    max-height: calc(100dvh + var(--_panel-bleed));\n    padding-block-start: var(--_panel-bleed);\n    margin-block-start: calc(var(--_panel-bleed) * -1);\n    border-block-start: none;\n    border-inline: none;\n  }\n\n  /* bottom */\n  :host([placement='bottom']) .panel {\n    --_panel-exit-transform: translateY(calc(100% + var(--_panel-bleed)));\n\n    inset-block-end: 0;\n    inset-inline: 0;\n    height: calc(var(--drawer-size, 16rem) + var(--_panel-bleed));\n    max-height: calc(100dvh + var(--_panel-bleed));\n    padding-block-end: var(--_panel-bleed);\n    margin-block-end: calc(var(--_panel-bleed) * -1);\n    border-block-end: none;\n    border-inline: none;\n  }\n\n  /* RTL overrides */\n  :host(:dir(rtl)[placement='left']) .panel {\n    --_panel-exit-transform: translateX(calc(100% + var(--_panel-bleed)));\n  }\n\n  :host(:dir(rtl)[placement='right']) .panel,\n  :host(:dir(rtl):not([placement])) .panel {\n    --_panel-exit-transform: translateX(calc(-100% - var(--_panel-bleed)));\n  }\n\n  /* Size utilities */\n  :host([size='sm']) {\n    --drawer-size: 14rem;\n  }\n\n  :host([size='lg']) {\n    --drawer-size: 32rem;\n  }\n\n  :host([size='full']) {\n    --drawer-size: 100%;\n  }\n\n  :host([size='full']) .panel {\n    width: calc(100% + var(--_panel-bleed));\n    max-width: none;\n    height: calc(100% + var(--_panel-bleed));\n    max-height: none;\n    border: none;\n  }\n\n  /* Header / Body / Footer */\n  .header {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--size-2);\n    align-items: center;\n    padding: var(--size-4);\n    border-bottom: var(--border) solid var(--color-contrast-200);\n  }\n\n  .header-title {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-lg);\n    font-weight: var(--font-semibold);\n    white-space: nowrap;\n  }\n\n  .body {\n    flex: 1;\n    padding: var(--size-4);\n    overflow-y: auto;\n  }\n\n  .footer {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--size-2);\n    justify-content: flex-end;\n    padding: var(--size-4);\n    border-top: var(--border) solid var(--color-contrast-200);\n  }\n\n  .header[hidden],\n  .footer[hidden],\n  .close-btn[hidden] {\n    display: none;\n  }\n\n  .close-btn {\n    all: unset;\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-8);\n    height: var(--size-8);\n    margin-inline-start: auto;\n    color: var(--color-contrast-500);\n    cursor: pointer;\n    border-radius: var(--rounded-sm);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .close-btn:hover {\n    color: var(--color-contrast-800);\n    background: var(--color-contrast-200);\n  }\n\n  .close-btn:active {\n    opacity: 0.8;\n  }\n\n  /* Drag handle for mobile/touch swipe-to-close */\n  .drag-handle {\n    position: absolute;\n    z-index: 10;\n    pointer-events: all;\n    touch-action: none;\n    cursor: grab;\n  }\n\n  .drag-handle:active {\n    cursor: grabbing;\n  }\n\n  /* Horizontal drawers (left/right) — drag handle on the opposite edge */\n  :host([placement='left']) .drag-handle,\n  :host(:not([placement])) .drag-handle,\n  :host([placement='right']) .drag-handle {\n    top: 50%;\n    width: var(--_panel-bleed);\n    height: 3.5rem;\n    translate: 0 -50%;\n  }\n\n  /* Left drawer — handle on the right (opposite side) */\n  :host([placement='left']) .drag-handle {\n    right: calc(var(--_panel-bleed) * -1);\n  }\n\n  /* Right drawer (default) — handle on the left (opposite side) */\n  :host([placement='right']) .drag-handle,\n  :host(:not([placement])) .drag-handle {\n    left: calc(var(--_panel-bleed) * -1);\n  }\n\n  /* Vertical drawers (top/bottom) — drag handle on the opposite edge */\n  :host([placement='top']) .drag-handle,\n  :host([placement='bottom']) .drag-handle {\n    left: 50%;\n    width: 3.5rem;\n    height: var(--_panel-bleed);\n    translate: -50% 0;\n  }\n\n  /* Top drawer — handle at bottom (opposite side) */\n  :host([placement='top']) .drag-handle {\n    bottom: calc(var(--_panel-bleed) * -1);\n  }\n\n  /* Bottom drawer — handle at top (opposite side) */\n  :host([placement='bottom']) .drag-handle {\n    top: calc(var(--_panel-bleed) * -1);\n  }\n\n  /* Inset drag-handle placement keeps the handle fully inside the panel. */\n  :host([drag-handle-placement='inset'][placement='left']) .drag-handle {\n    right: var(--_drag-handle-inset);\n  }\n\n  :host([drag-handle-placement='inset'][placement='right']) .drag-handle,\n  :host([drag-handle-placement='inset']:not([placement])) .drag-handle {\n    left: var(--_drag-handle-inset);\n  }\n\n  :host([drag-handle-placement='inset'][placement='top']) .drag-handle {\n    bottom: var(--_drag-handle-inset);\n  }\n\n  :host([drag-handle-placement='inset'][placement='bottom']) .drag-handle {\n    top: var(--_drag-handle-inset);\n  }\n\n  /* Visual indicator — subtle bar in the center */\n  .drag-handle::before {\n    position: absolute;\n    inset: 50%;\n    content: '';\n    background: var(--color-contrast-400);\n    border-radius: var(--rounded-full);\n    opacity: 0.6;\n    translate: -50% -50%;\n    transition:\n      background var(--transition-fast),\n      opacity var(--transition-fast),\n      transform var(--transition-fast);\n  }\n\n  :host([placement='left']) .drag-handle::before,\n  :host([placement='right']) .drag-handle::before,\n  :host(:not([placement])) .drag-handle::before {\n    width: 5px;\n    height: 2.5rem;\n  }\n\n  :host([placement='top']) .drag-handle::before,\n  :host([placement='bottom']) .drag-handle::before {\n    width: 2.5rem;\n    height: 5px;\n  }\n\n  .drag-handle:hover::before {\n    background: var(--color-contrast-600);\n    opacity: 0.9;\n    transform: scale(1.15);\n  }\n\n  .close-btn:focus-visible {\n    outline: var(--focus-ring);\n  }\n\n  @media (width <= 640px) {\n    :host([placement='left']) .panel,\n    :host(:not([placement])) .panel,\n    :host([placement='right']) .panel {\n      width: calc(min(var(--drawer-size, 20rem), calc(100vw - var(--size-2))) + var(--_panel-bleed));\n      max-width: calc(100vw - var(--size-2) + var(--_panel-bleed));\n    }\n\n    :host([placement='top']) .panel,\n    :host([placement='bottom']) .panel {\n      height: calc(min(var(--drawer-size, 16rem), calc(100dvh - var(--size-2))) + var(--_panel-bleed));\n      max-height: calc(100dvh - var(--size-2) + var(--_panel-bleed));\n    }\n\n    .header,\n    .body,\n    .footer {\n      padding: var(--size-3);\n    }\n  }\n}\n\n@layer refine.config {\n  :host([backdrop='blur']) {\n    --_backdrop-filter: blur(var(--blur-xs));\n  }\n\n  :host([backdrop='transparent']) {\n    --_backdrop-bg: transparent;\n  }\n}\n"],"mappings":""}