Empty StateBLK

/* -- Empty State (website · Account & States) -----------------------------

   Explains missing content and offers an appropriate next action - an icon, why it is empty, and the first step; on a dashed area or inline in a list. */

@layer components {

  /* every box in the block measures border-box - the same on any page */

  :where(.mk-empty-state, .mk-empty-state *, .mk-empty-state ::before, .mk-empty-state ::after) { box-sizing: border-box; }

  .mk-empty-state { display: grid; justify-items: center; gap: 1rem; width: 100%; max-width: 32rem; margin-inline: auto; padding: 2.5rem 1.5rem; text-align: center; }

  .mk-empty-state-icon { position: relative; display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: var(--muted); }

  .mk-empty-state-icon svg { width: 1.75rem; height: 1.75rem; }

  .mk-empty-state-title { margin: 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }

  .mk-empty-state-text { margin: 0; color: var(--muted-foreground); line-height: 1.6; text-wrap: pretty; }

  .mk-empty-state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-block-start: 0.25rem; }

  .mk-empty-state-icon { box-shadow: 0 0 0 0.625rem color-mix(in oklch, var(--muted) 60%, transparent), 0 0 0 1.25rem color-mix(in oklch, var(--muted) 30%, transparent); margin-block: 1.25rem 0.5rem; }

  .mk-empty-state[data-variant="dashed"] { max-width: none; border: 2px dashed var(--border); border-radius: var(--radius-xl); }

  .mk-empty-state[data-variant="compact"] {

    grid-template-columns: auto minmax(0, 1fr) auto;

    justify-items: start;

    align-items: center;

    gap: 0 1rem;

    max-width: none;

    padding: 1rem 1.25rem;

    text-align: start;

    & .mk-empty-state-icon { grid-row: span 2; width: 2.5rem; height: 2.5rem; margin: 0; box-shadow: none; & svg { width: 1.125rem; height: 1.125rem; } }

    & .mk-empty-state-title { font-size: 0.9375rem; }

    & .mk-empty-state-text { font-size: 0.875rem; }

    & .mk-empty-state-actions { grid-column: 3; grid-row: 1 / span 2; margin: 0; }

  }

  /* -- Accessibility ------------------------------------------- */

  @media (forced-colors: active) {

    .mk-empty-state-icon { border: 1px solid CanvasText; box-shadow: none; }

  }

}