:host {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;

  padding: var(--lmvz-dimension-12-10, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)) var(--lmvz-dimension-14-12, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
  gap: var(--lmvz-dimension-12-8, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));

  border: var(--lmvz-semantic-border-width-default, 1px) solid;
  border-radius: var(--lmvz-semantic-border-radius-md, 6px);

  font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
    Router);
}

/* neutral maps to status-active tokens to preserve Figma's "neutral" naming convention;
   the design system token uses "active" for the neutral/informational status colour role */

:host([type='neutral']) {
  background-color: var(--lmvz-semantic-color-status-active, #f6fbfe);
  border-color: var(--lmvz-semantic-color-status-on-active-subtle, #c1e6fa);
  color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
}

:host([type='warning']) {
  background-color: var(--lmvz-semantic-color-status-warning, #ffeeb8);
  border-color: var(--lmvz-semantic-color-status-on-warning-subtle, #e6b000);
  color: var(--lmvz-semantic-color-status-on-warning, #614a00);
}

.leading-icon {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  /* 2px raw value — parity row TM-1: icon optical alignment offset; no token exists for
     sub-4px micro-adjustments in the current token scale */
  padding-top: 2px;
  width: var(--lmvz-component-icon-size-md, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));
  height: var(--lmvz-component-icon-size-md, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));
}

.leading-icon svg {
  width: 100%;
  height: 100%;
}

.message {
  flex: 1;
}