/* The ✕ on a message (ADR 0111).

   One control for both message kinds and both design systems. The panels' `.flash` is a
   `.card` — a plain background/border block — so the flex row is added here; the storefront's
   `.info-bar` is already a flex row, so only the push-right is. App-owned and therefore
   unlayered, which is what lets it outrank the vendored component it decorates.

   The button takes `color: inherit` rather than picking one: the same control sits on a
   success tint, an error tint, the info bar's sunk surface and the onboarding banner's filled
   info colour, and each of those already carries a text colour that passes contrast there. */

.dismissible {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.dismissible__text {
    flex: 1;
    min-width: 0;
}

.dismiss {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    flex: none;
    font-size: var(--font-size-body-lg);
    line-height: 1;
    /* WCAG 2.5.8: the ✕ glyph is small, the target it sits in is not. */
    min-width: 24px;
    min-height: 24px;
    margin-inline-start: auto;
    padding: 0;
    opacity: 0.7;
    transition: opacity var(--motion-duration-fast) var(--motion-easing-standard);
}

.dismiss:hover,
.dismiss:focus-visible {
    opacity: 1;
}

.dismiss:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}