/*
Alert

Builds on @elements/style's .callout (rule, tinted fill, matching
ink; is-info, is-success, is-warning, is-danger, is-accent) and lays it
out as shadcn's alert: a grid with an optional icon column, the title and
description, and an optional action column at the inline end. Parts place
themselves by class, so they work in any order.

  .callout.alert                   grid: [icon] [content] [action]
  .callout.alert.is-neutral        surface colors, for an ordinary notice
  .alert > svg                     the icon, centered on the first line
  .alert-title / .alert-description / .alert-action
*/

@layer components {

.callout.alert {
  display:               grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items:           start;
  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);
}

.alert > * {
  grid-column: 2;
  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. */
.alert-title,
.alert-description {
  overflow-wrap: anywhere;
}

.alert > svg {
  grid-column:  1;
  grid-row:     1 / span 2;
  width:        var(--icon-size);
  height:       var(--icon-size);
  margin-top:        calc((1lh - var(--icon-size)) / 2);
  margin-inline-end: var(--space-3);
  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);
}

.alert-description a {
  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: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);
}

.alert-action {
  grid-column: 3;
  grid-row:    1 / span 2;
  align-self:  start;
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  margin:              0;
  margin-block-start:  calc((1lh - var(--control-height-sm)) / 2);
  margin-inline-start: var(--space-3);
}

}