{"version":3,"file":"alert.css.cjs","names":[],"sources":["../../../src/feedback/alert/alert.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--alert-bg, var(--_theme-backdrop));\n    --_color: var(--alert-color, var(--_theme-base));\n    --_border-color: var(--alert-border-color, var(--_theme-border));\n    --_radius: var(--alert-radius, var(--rounded-lg));\n    --_padding: var(--alert-padding, var(--size-4));\n    --_gap: var(--alert-gap, var(--size-3));\n    --_font-size: var(--alert-font-size, var(--text-sm));\n    --_shadow: var(--alert-shadow, var(--shadow-none));\n\n    display: block;\n  }\n\n  .sr-announce {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    white-space: nowrap;\n    border-width: 0;\n    clip-path: inset(50%);\n  }\n\n  :host([dismissed]) {\n    display: none;\n  }\n\n  :host([dismissing]) {\n    overflow: hidden;\n    pointer-events: none;\n    animation: var(--_motion-animation, ore-alert-exit var(--transition-slow) var(--ease-in-out) forwards);\n  }\n\n  @keyframes ore-alert-exit {\n    0% {\n      /* Use a large enough value to cover any realistic alert height. */\n      max-height: 600px;\n      margin-bottom: var(--size-3);\n      opacity: 1;\n      transform: scaleY(1);\n    }\n\n    60% {\n      opacity: 0;\n      transform: scaleY(0.8);\n    }\n\n    100% {\n      max-height: 0;\n      padding-top: 0;\n      padding-bottom: 0;\n      margin-bottom: 0;\n      opacity: 0;\n      transform: scaleY(0);\n    }\n  }\n\n  .alert {\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    row-gap: var(--size-1);\n    padding: var(--_padding);\n    overflow: hidden;\n    font-size: var(--_font-size);\n    line-height: var(--leading-normal);\n    color: var(--_color);\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--_shadow);\n    transition:\n      background var(--transition-normal),\n      border-color var(--transition-normal),\n      box-shadow var(--transition-normal),\n      color var(--transition-normal);\n  }\n\n  /* ── Icon ──────────────────────────────────────── */\n\n  .icon {\n    display: inline-flex;\n    grid-row: 1;\n    grid-column: 1;\n    align-items: center;\n    align-self: start;\n    justify-content: center;\n    margin-inline-end: var(--_gap);\n  }\n\n  /* Without heading: icon aligns with the body content */\n  .alert:has(.header[hidden]) .icon {\n    align-self: center;\n  }\n\n  .icon[hidden] {\n    display: none;\n  }\n\n  /* ── Header row (heading + meta) ───────────────── */\n\n  .header {\n    display: flex;\n    grid-row: 1;\n    grid-column: 2;\n    gap: var(--size-2);\n    align-items: baseline;\n  }\n\n  .header[hidden] {\n    display: none;\n  }\n\n  .heading {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-weight: var(--font-semibold);\n    line-height: var(--leading-normal);\n    white-space: nowrap;\n  }\n\n  .meta {\n    margin-inline-start: auto;\n    font-size: var(--text-xs);\n    white-space: nowrap;\n    opacity: 0.7;\n  }\n\n  :host(:not(:has([slot='meta']))) .meta {\n    display: none;\n  }\n\n  /* ── Body ──────────────────────────────────────── */\n\n  .body {\n    grid-row: 2;\n    grid-column: 1 / -1;\n    min-width: 0;\n    margin-top: var(--size-1);\n  }\n\n  /* Without heading: body moves up to share row with icon and close */\n  .alert:has(.header[hidden]) .body {\n    grid-row: 1;\n    grid-column: 2;\n    margin-top: 0;\n  }\n\n  /* ── Content ───────────────────────────────────── */\n\n  .content {\n    line-height: var(--leading-relaxed);\n  }\n\n  /* ── Actions ───────────────────────────────────── */\n\n  .actions {\n    display: flex;\n    flex-wrap: wrap;\n    grid-row: 3;\n    grid-column: 1 / -1;\n    gap: var(--size-2);\n    margin-top: var(--size-2);\n  }\n\n  /* Without heading: actions move to row 2 */\n  .alert:has(.header[hidden]) .actions {\n    grid-row: 2;\n  }\n\n  .actions[hidden] {\n    display: none;\n  }\n\n  /* Horizontal mode: 4-column grid — icon | body | actions | close */\n  :host([horizontal]) .alert {\n    grid-template-columns: auto 1fr auto auto;\n  }\n\n  :host([horizontal]) .body {\n    grid-row: 1;\n    grid-column: 2;\n    align-self: center;\n    margin-top: 0;\n  }\n\n  :host([horizontal]) .actions:not([hidden]) {\n    flex-wrap: nowrap;\n    grid-row: 1;\n    grid-column: 3;\n    margin-inline-start: var(--_gap);\n    margin-top: 0;\n  }\n\n  :host([horizontal]) .close {\n    grid-column: 4;\n    align-self: center;\n  }\n\n  /* ── Close button ──────────────────────────────── */\n\n  .close {\n    display: inline-flex;\n    grid-row: 1;\n    grid-column: 3;\n    align-items: center;\n    align-self: start;\n    justify-content: center;\n    width: var(--size-5);\n    min-width: var(--_touch-target);\n    height: var(--size-5);\n    min-height: var(--_touch-target);\n    padding: 0;\n    margin-inline-start: var(--_gap);\n    color: inherit;\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-sm);\n    opacity: 0.7;\n    transition:\n      opacity var(--transition-fast),\n      background var(--transition-fast);\n  }\n\n  .close[hidden] {\n    display: none;\n  }\n\n  .close:hover {\n    background: color-mix(in oklch, currentcolor 12%, transparent);\n    opacity: 1;\n  }\n\n  .close:focus-visible {\n    outline: var(--border-2) solid currentcolor;\n    outline-offset: var(--border-2);\n    opacity: 1;\n  }\n\n  /* Accented left border for flat and bordered variants */\n  :host([variant='flat'][accented]) .alert,\n  :host([variant='bordered'][accented]) .alert {\n    border-inline-start-width: var(--border-4, 4px);\n  }\n}\n\n@layer refine.variants {\n  /* Flat (Default) — canvas background, theme-colored border and text */\n  :host(:not([variant])),\n  :host([variant='flat']) {\n    --_bg: var(--alert-bg, var(--color-canvas));\n    --_color: var(--alert-color, var(--_theme-base));\n    --_border-color: var(--alert-border-color, var(--_theme-base));\n    --_shadow: var(--alert-shadow, var(--shadow-none));\n  }\n\n  /* Solid — fully filled with theme color */\n  :host([variant='solid']) {\n    --_bg: var(--alert-bg, var(--_theme-base));\n    --_color: var(--alert-color, var(--_theme-contrast));\n    --_border-color: var(--alert-border-color, var(--_theme-base));\n    --_shadow: var(--alert-shadow, var(--shadow-xs));\n  }\n\n  /* Bordered — tinted background with a subtle themed border */\n  :host([variant='bordered']) {\n    --_bg: var(--alert-bg, color-mix(in oklch, var(--_theme-backdrop), var(--color-canvas)));\n    --_color: var(--alert-color, var(--_theme-base));\n    --_border-color: var(--alert-border-color, color-mix(in oklch, var(--_theme-focus) 30%, transparent));\n    --_shadow: var(--alert-shadow, var(--inset-shadow-2xs));\n  }\n}\n"],"mappings":""}