/* Storefront flash messages: the notices sit in the page gutter at the top of the page content. The wrapper keeps the page's
   width and inline gutter and drops its block padding; the page content below keeps its own top padding.
   Hand-written, native nesting only. The notice variants and icons are in components/notice.css. */

@layer components {
  .storefront-flash {
    padding-block: var(--space-6) 0;
  }

  /* Beats .notices, which sets the space below a group of notices. */
  .storefront-flash.notices { margin-bottom: 0; }

  /* Noria notices: square, on the light sand, a coloured edge and the icon carry the state. */
  body.storefront .notice {
    border-width: 0 0 0 0.25rem;
    border-radius: 0;
    font-size: var(--noria-text-small);
    line-height: 1.6;
  }

  body.storefront .storefront-flash {
    width: min(100% - 2 * var(--noria-gutter), var(--noria-wide-column));
  }
}