/* src/components/basic/XWUIFeedbackAlert/XWUIFeedbackAlert.css */
/**
 * XWUIFeedbackAlert Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/alert/*.css (component-specific border widths)
 * - Roundness: theme/roundness/alert/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm, 0.75rem);
    padding: var(--spacing-md, 1rem);
    border-radius: var(--radius-alert, var(--radius-md, 8px));
    background: var(--bg-secondary);
    transition: opacity 0.2s, transform 0.2s;
}

.xwui-alert-closing {
    opacity: 0;
    transform: translateY(-8px);
}

/* Variants - use accent colors with light backgrounds. TEXT mixes each
   accent 70/30 with --text-primary (border/icon stay the pure accent) - some accents (--accent-success emerald, and whichever hue --accent-primary
   resolves to under a given brand/accent combo) aren't dark/light enough on
   their own to clear 3:1 against --bg-elevated as literal text ink; a color
   picked for BACKGROUND+white-text duty isn't guaranteed to also work as
   TEXT-on-elevated-surface duty. Mixing toward --text-primary (NOT a fixed
   black/white) is what makes this theme-proof: --text-primary is already
   the correct ink extreme for whichever theme is active (dark ink in light
   theme, light ink in dark theme), so the mix pulls the accent's luminance
   toward whichever direction THIS theme's --bg-elevated actually needs.
   Found by the expanded color smoke test (Alert check). */
.xwui-alert-info {
    /* Each variant's fill, border and ink can be themed through
       --alert-<variant>-bg / -border / -ink; the defaults are unchanged. */
    background: var(--alert-info-bg, var(--bg-elevated));
    color: var(--alert-info-ink, color-mix(in srgb, var(--accent-primary) 70%, var(--text-primary)));
    border: var(--border-alert-width, var(--border-width-regular, 1.5px)) solid var(--alert-info-border, var(--accent-primary));
}

.xwui-alert-success {
    background: var(--alert-success-bg, var(--bg-elevated));
    /* 54%, not the 70% of info and error: emerald at 70% lands on #158d67,
       4.17:1 on #ffffff, under the 4.5:1 body-text floor. 54% is the mix the
       warning ink uses and leaves 5.63:1 (XWUIFeedbackAlert.contrast.test.ts). */
    color: var(--alert-success-ink, color-mix(in srgb, var(--accent-success) 54%, var(--text-primary)));
    border: var(--border-alert-width, var(--border-width-regular, 1.5px)) solid var(--alert-success-border, var(--accent-success));
}

.xwui-alert-warning {
    background: var(--alert-warning-bg, var(--bg-elevated));
    /* See XWUIAlert.css: the inline 70% mix resolved to #b57a14 at 3.65:1 on
       --bg-elevated. Same token, same corrected fallback, kept in step. */
    color: var(--alert-warning-ink, var(--role-warning-ink, color-mix(in srgb, var(--accent-warning) 54%, var(--text-primary))));
    border: var(--border-alert-width, var(--border-width-regular, 1.5px)) solid var(--alert-warning-border, var(--accent-warning));
}

.xwui-alert-error {
    background: var(--alert-error-bg, var(--bg-elevated));
    color: var(--alert-error-ink, color-mix(in srgb, var(--accent-error) 70%, var(--text-primary)));
    border: var(--border-alert-width, var(--border-width-regular, 1.5px)) solid var(--alert-error-border, var(--accent-error));
}

/* Bordered - explicit border variant */
.xwui-alert-bordered.xwui-alert-info {
    border-color: var(--accent-primary);
}

.xwui-alert-bordered.xwui-alert-success {
    border-color: var(--accent-success);
}

.xwui-alert-bordered.xwui-alert-warning {
    border-color: var(--accent-warning);
}

.xwui-alert-bordered.xwui-alert-error {
    border-color: var(--accent-error);
}

/* Filled - use accent colors as background */
.xwui-alert-filled.xwui-alert-info {
    background: var(--accent-primary);
    color: var(--text-inverse);
    border-color: var(--accent-primary);
}

/* success/warning filled ink prefers --role-*-fg over --text-inverse - same
   bright-background-vs-white-text gap as the outline variant above. */
.xwui-alert-filled.xwui-alert-success {
    background: var(--accent-success);
    color: var(--role-success-fg, var(--text-inverse));
    border-color: var(--accent-success);
}

.xwui-alert-filled.xwui-alert-warning {
    background: var(--accent-warning);
    color: var(--role-warning-fg, var(--text-inverse));
    border-color: var(--accent-warning);
}

.xwui-alert-filled.xwui-alert-error {
    background: var(--accent-error);
    color: var(--text-inverse);
    border-color: var(--accent-error);
}

/* Variant glyph. Named -glyph, not -icon: XWUIGameAlertIcon owns the
   .xwui-alert-icon class and its root rule is `opacity: 0` until a --active
   modifier is added, so on a page that loaded both sheets this glyph stayed
   invisible and the alert painted an empty gutter. */
.xwui-alert-glyph {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.xwui-alert-glyph svg {
    width: 20px;
    height: 20px;
}

/* Content */
.xwui-alert-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 0.25rem);
}

.xwui-alert-title {
    font-weight: var(--font-weight-semibold, 600);
    font-size: var(--font-size-base, 0.9375rem);
}

/* No opacity here. It is composited into the ink, so the 0.9 this rule used to
   carry painted the message lighter than the colour the variant rule picked:
   warning 5.05:1 became 4.17:1 and success 4.17:1 became 3.58:1 (AA is 4.5:1).
   The title's weight and size already set the hierarchy. */
.xwui-alert-message {
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.5;
}

/* Action */
.xwui-alert-action {
    margin-top: var(--spacing-xs, 0.5rem);
    padding: var(--spacing-xs, 0.375rem) var(--spacing-sm, 0.75rem);
    border: none;
    background: transparent;
    font-weight: var(--font-weight-medium, 500);
    font-size: var(--font-size-sm, 0.875rem);
    text-decoration: underline;
    cursor: pointer;
    color: inherit;
    align-self: flex-start;
}

.xwui-alert-action:hover {
    opacity: 0.8;
}

/* Close button */
.xwui-alert-close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xs, 0.25rem);
    border: none;
    background: transparent;
    cursor: pointer;
    color: currentColor;
    /* Rests at 0.75: at 0.5 the glyph was about 2:1 on the card, under the 3:1
       WCAG 1.4.11 asks of a control's graphic. */
    opacity: 0.75;
    border-radius: var(--radius-sm, 4px);
    transition: opacity 0.2s, background 0.2s;
}

.xwui-alert-close:hover {
    opacity: 1;
    background: var(--bg-hover);
}

.xwui-alert-filled .xwui-alert-close:hover {
    background: var(--bg-active);
}

.xwui-alert-close svg {
    width: 16px;
    height: 16px;
}

/* Note: Dark theme support is handled automatically via theme/colors/{theme}.css files */