/*
 * A soft danger frame: a low-alpha red hairline over the faintest red wash —
 * "set apart, not shouting". The two alphas are mixes of `--destructive`, the
 * one hue the kit reads from the shadcn contract, so they follow a theme's own
 * destructive and composite over whatever ground the zone sits on.
 *
 * `Callout`'s box, deliberately: the mark is the root row's first item and every
 * line in the block starts from `body`'s edge. A mark inside a heading row indents
 * the title alone and leaves three left edges in one padded box.
 */
@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);
  }

  /* The column every line in the block starts from. The quarter-rung nudge is
     `Callout`'s: the glyph's box is shorter than the first line's, so the type
     sits a pixel high against it without one. */
  .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);
  }
}