/* mud-banner — full-width top-of-page system message.
   The surface color comes from the variant × emphasis rules below; default
   props (info / subtle) reflect to attributes so the surface matches before
   hydration. Every value is a `--banner-*` component token
   (tokens/core/components/banner.tokens.json). */

:host {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
  inline-size: 100%;
  gap: var(--banner-container-gap);
  padding-block: var(--banner-container-padding-block);
  /* Figma pads the row 12px 0 (106:1052); the close is absolute, so the row
     itself needs no inline padding. */
  padding-inline: var(--banner-container-padding-inline);
  font-family: var(--banner-message-font-family);
}

.content {
  display: flex;
  align-items: center;
  gap: var(--banner-container-content-gap);
  min-inline-size: 0;
  /* The centred content keeps clear of the absolutely-positioned close. The
     margin is symmetric, so the centre stays where Figma puts it; it only
     caps how far a long message may run. */
  margin-inline: var(--banner-container-content-inset);
}

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  inline-size: var(--banner-icon-size);
  block-size: var(--banner-icon-size);
}

.message {
  margin: 0;
  font-size: var(--banner-message-font-size);
  line-height: var(--banner-message-line-height);
  font-weight: var(--banner-message-font-weight);
  /* Figma's message is one short line, and it still renders as one. A long
     message wraps rather than running off the page: with `nowrap` it pushed
     past the viewport and gave the whole page a horizontal scrollbar. */
  overflow-wrap: anywhere;
}

.link {
  flex-shrink: 0;
  font-size: var(--banner-link-font-size);
  line-height: var(--banner-link-line-height);
  text-decoration: underline;
  text-underline-offset: var(--banner-link-underline-offset);
  color: var(--banner-link-color);
  cursor: pointer;
}

/* Inline actions after the message; they replace the deprecated link props. */
.actions {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--banner-actions-gap);
}

:host(:not(.has-actions)) .actions {
  display: none;
}

.close {
  position: absolute;
  /* Figma puts the 16px glyph 16px from the right edge (106:1029 at x=1216 of
     1248). The 32x32 pointer target (Target Sizes, 578:33523) is centred on
     that glyph, so the button itself ends 8px from the edge. */
  inset-inline-end: var(--banner-close-inset-inline-end);
  inset-block-start: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  inline-size: var(--banner-close-size-pointer);
  block-size: var(--banner-close-size-pointer);
  padding: 0;
  margin: 0;
  appearance: none;
  border: 0;
  background: transparent;
  /* Figma paints the glyph #444444 on the light fills, not with the message text. */
  color: var(--banner-close-color-default);
  cursor: pointer;
  border-radius: var(--banner-close-border-radius);
  transition: background-color 150ms ease;
}

.close:hover {
  background-color: color-mix(in srgb, currentcolor 12%, transparent);
}

.close-icon {
  display: inline-flex;
  inline-size: var(--banner-close-icon-size);
  block-size: var(--banner-close-icon-size);
}

.close svg {
  inline-size: var(--banner-close-icon-size);
  block-size: var(--banner-close-icon-size);
}

/* Focus ring on both focusable parts. The browser's default ring is drawn in
   its own blue, which disappears on the strong surfaces (the info fill is the
   same blue), so every focusable draws the design-system ring instead: a white
   inner halo inside a blue band, readable on all six fills. */
.close:focus-visible,
.link:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 var(--focus-ring-width-inner) var(--focus-ring-color-inner),
    0 0 0 calc(var(--focus-ring-width-inner) + var(--focus-ring-width-outer)) var(--focus-ring-color-outer);
  position: relative;
  z-index: 1;
}

.link:focus-visible {
  border-radius: var(--banner-close-border-radius);
}

/* ---------- Variant × emphasis surfaces (Figma "Styles") ---------- */

/* Strong = filled background, on-color foreground. */
:host([emphasis='strong'][variant='info']) {
  background: var(--banner-info-strong-background);
  color: var(--banner-info-strong-text);
}

:host([emphasis='strong'][variant='warning']) {
  background: var(--banner-warning-strong-background);
  color: var(--banner-warning-strong-text);
}

:host([emphasis='strong'][variant='error']) {
  background: var(--banner-error-strong-background);
  color: var(--banner-error-strong-text);
}

/* Subtle = tinted background, dark foreground. */
:host([emphasis='subtle'][variant='info']) {
  background: var(--banner-info-subtle-background);
  color: var(--banner-info-subtle-text);
}

:host([emphasis='subtle'][variant='warning']) {
  background: var(--banner-warning-subtle-background);
  color: var(--banner-warning-subtle-text);
}

:host([emphasis='subtle'][variant='error']) {
  background: var(--banner-error-subtle-background);
  color: var(--banner-error-subtle-text);
}

/* White on the dark Strong fills. */
:host([emphasis='strong'][variant='info']) .close,
:host([emphasis='strong'][variant='error']) .close {
  color: var(--banner-close-color-on-strong);
}

/* ---------- Icon color (Figma paints it per style, not with the text) ---------- */

:host([emphasis='subtle'][variant='info']) .icon {
  --icon-color: var(--banner-info-subtle-icon);
}

:host([emphasis='subtle'][variant='warning']) .icon {
  --icon-color: var(--banner-warning-subtle-icon);
}

:host([emphasis='subtle'][variant='error']) .icon {
  --icon-color: var(--banner-error-subtle-icon);
}

:host([emphasis='strong'][variant='info']) .icon {
  --icon-color: var(--banner-info-strong-icon);
}

:host([emphasis='strong'][variant='error']) .icon {
  --icon-color: var(--banner-error-strong-icon);
}

/* The shared blue focus band reads only 2.77:1 on the amber fill, under the
   3:1 a focus indicator needs (SC 1.4.11). On this one surface the band takes
   the dark amber the icon already uses (3.51:1); every other fill keeps the
   default ring, which is 3.55:1 or better. */
:host([emphasis='strong'][variant='warning']) {
  --focus-ring-color-outer: var(--banner-warning-strong-icon);
}

/* Warning strong keeps the dark amber glyph on the amber fill (255:6673). */
:host([emphasis='strong'][variant='warning']) .icon {
  --icon-color: var(--banner-warning-strong-icon);
}

/* On a filled (strong) surface a brand-blue link is low-contrast, so the link
   adopts the on-color foreground and stays underlined. */
:host([emphasis='strong']) .link {
  color: currentcolor;
}

/* ---------- Narrow / touch: stack content, wrap text, 40x40 close ---------- */
@media (max-width: 640px) {
  :host {
    align-items: flex-start;
    justify-content: flex-start;
    /* Figma mobile: padding 12px 12px 12px 16px, 16px between the content and
       the close (574:30062). */
    gap: var(--banner-mobile-gap);
    padding-inline-start: var(--banner-mobile-padding-inline-start);
    padding-inline-end: var(--banner-mobile-padding-inline-end);
  }

  .content {
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--banner-mobile-content-gap);
    margin-inline: 0;
  }

  .message {
    flex: 1 1 0;
    min-inline-size: 0;
    font-size: var(--banner-message-font-size-mobile);
    line-height: var(--banner-message-line-height-mobile);
  }

  /* Figma's mobile master draws the close in a 24x24 box, 4px around the
     glyph (574:30158). Widening the box to the 40x40 touch target would take
     16px from the message and change where it wraps, so the box stays 24x24
     and the ::after overlay below grows the hit area instead. */
  .close {
    position: relative;
    /* The desktop rule offsets the absolutely-positioned button; a relative
       one would be shifted by the same inset. */
    inset-inline-end: auto;
    inset-block-start: auto;
    transform: none;
    inline-size: var(--banner-close-size-mobile);
    block-size: var(--banner-close-size-mobile);
    padding: var(--banner-close-padding);
  }

  /* Touch target 40x40 (Target Sizes, 578:33410): the overlay extends the
     button's hit area 8px on every side without affecting layout. */
  .close::after {
    content: '';
    position: absolute;
    inset: calc(-1 * var(--banner-close-hit-area-inset));
  }
}