/*
 * A soft danger frame: a low-alpha hairline over the faintest wash, both mixed from `--destructive`
 * so a theme's own destructive follows. `Callout`'s box: the mark is the root row's first item so
 * every line starts from `body`'s edge.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-danger-section {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--lotics-lead-gap);
    padding: var(--lotics-space-16);
    border-radius: var(--lotics-radius-control);
    border: 1px solid color-mix(in srgb, var(--destructive) 30%, transparent);
    background-color: color-mix(in srgb, var(--destructive) 3%, transparent);
  }

  /* `Callout`'s quarter-rung nudge: the glyph box is shorter than the first line. */
  .lotics-danger-section__body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
    min-width: 0;
    gap: var(--lotics-space-8);
    padding-block-start: var(--lotics-space-2);
  }

  .lotics-danger-section__actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--lotics-space-8);
    margin-top: var(--lotics-space-2);
  }
}