/*
Alert

Builds on style/base's .callout (rule, tinted fill, matching
ink; is-info, is-success, is-warning, is-danger, is-accent). Everything
that is not the icon or an action reads as one column in block flow, so
loose text and inline links stay one paragraph beside the title and
description. The icon sits in the inline-start padding, centered on the
first line, in any order. An action that is the last part makes the alert
a one-row table: the action is a cell at the inline end and everything
before it shares the other cell. An action anywhere else places the parts
on a grid, each in its own row.

  .callout.alert                         block flow
  .callout.alert:has(> svg)              icon in the inline-start padding
  .callout.alert:has(action last)        table: [content] [action]
  .callout.alert:has(action not last)    grid:  [content] [action]
  .callout.alert.is-neutral              surface colors, for an ordinary notice
  .alert-title / .alert-description / .alert-action > .alert-action-content
*/

/* The package's layer order, repeated in every sheet so it holds whichever sheet loads first. */
@layer reset, tokens, base, components, templates, utilities, overrides;

@layer templates {

.callout.alert {
  display:               block;
  padding:               var(--surface-padding-sm);
  /* .callout draws its rule on the physical left; the alert's rule sits on
     the inline start so it follows dir=rtl. Colors stay the variant's. */
  border-style:              none;
  border-inline-start-style: solid;
  border-inline-start-width: calc(var(--surface-border-width) * 3);
  border-radius:             0;
  border-start-end-radius:   var(--radius-surface);
  border-end-end-radius:     var(--radius-surface);
  font-family:           var(--font-ui);
  font-size:             var(--text-ui);
  line-height:           var(--leading-body);
  text-align:            start;
}

.callout.alert.is-neutral {
  border-color: var(--rule-strong, var(--rule));
  background:   var(--surface-bg);
  color:        var(--ink);
}

.callout.alert:has(> svg) {
  position:             relative;
  padding-inline-start: calc(var(--surface-padding-sm) + var(--icon-size) + var(--space-3));
}

/* The table's anonymous cell wraps every child before the action, text
   runs included, which a grid would split into separate items. */
.callout.alert:has(> .alert-action:last-child) {
  display:         table;
  width:           100%;
  box-sizing:      border-box;
  border-collapse: separate;
}

.alert > .alert-action:last-child {
  display:             table-cell;
  width:               1px;
  vertical-align:      top;
  padding-inline-start: var(--space-3);
}

.callout.alert:has(> .alert-action:not(:last-child)) {
  display:               grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items:           start;
}

.callout.alert:has(> .alert-action:not(:last-child)) > * {
  grid-column: 1;
  min-width:   0;
}

/* A long unbroken word (a URL, an id, an email) wraps inside its part
   instead of running under the action or past the alert's edge. */
.callout.alert {
  overflow-wrap: anywhere;
}

.alert > svg {
  position:           absolute;
  inset-block-start:  var(--surface-padding-sm);
  inset-inline-start: var(--surface-padding-sm);
  width:              var(--icon-size);
  height:             var(--icon-size);
  margin-top:         calc((1lh - var(--icon-size)) / 2);
  color:              currentColor;
}

.alert-title {
  margin:      0;
  font-size:   inherit;
  font-weight: var(--weight-strong);
  line-height: inherit;
}

.alert-description {
  color: inherit;
}

.callout.alert.is-neutral .alert-description {
  color: var(--ink-soft);
}

.alert-title + .alert-description {
  margin-top: var(--space-0-5);
}

/* Inline links take the alert's ink. A Button, Badge or Item link is a
   control and keeps its own colors. */
.alert-description a:not(.button, .pill, .item),
.alert > a:not(.button, .pill, .item) {
  color:                 inherit;
  text-decoration-color: currentColor;
}

/* Hover only where a pointer can hover: a tap on a touch screen leaves no fill. */
@media (hover: hover) {
  .alert-description a:not(.button, .pill, .item):hover,
  .alert > a:not(.button, .pill, .item):hover {
    color: var(--ink);
  }
}

.alert-description > p {
  margin: 0;
}

.alert-description > p + p,
.alert-description > ul {
  margin-top: var(--space-2);
}

.alert-description > ul {
  margin-bottom: 0;
  padding-inline-start: var(--space-5);
}

.callout.alert > .alert-action:not(:last-child) {
  grid-column:         2;
  grid-row:            1 / span 2;
  margin-inline-start: var(--space-3);
}

.alert-action-content {
  display:            flex;
  align-items:        center;
  gap:                var(--space-2);
  margin-block-start: calc((1lh - var(--control-height-sm)) / 2);
  white-space:        nowrap;
}

}