@layer ec.components {
  .ec-empty-state {
    display: grid;
    justify-items: start;
    gap: var(--ec-space-3);
    padding: var(--ec-space-8);
    border: var(--ec-border-width-thin) dashed var(--ec-sys-color-outline);
    border-radius: var(--ec-radius-xl);
    background: var(--ec-sys-color-surface-subtle);
    color: var(--ec-sys-color-on-surface-muted);
  }

  .ec-empty-state__title {
    color: var(--ec-sys-color-on-surface-strong);
    font-size: var(--ec-type-title-lg-size);
    font-weight: var(--ec-font-weight-bold);
    line-height: var(--ec-type-title-lg-line);
  }

  .ec-empty-state__description {
    max-width: 56ch;
    color: var(--ec-sys-color-on-surface-muted);
    font-size: var(--ec-type-body-md-size);
    line-height: var(--ec-type-body-md-line);
  }

  .ec-empty-state__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ec-space-3);
    margin-block-start: var(--ec-space-2);
  }

  @media (max-width: 479px) {
    .ec-empty-state {
      padding: var(--ec-space-6);
    }
  }
}