@layer components {
  .app-empty-state {
    border: 1px dashed var(--app-empty-border-color);
    border-radius: var(--app-border-radius);
    background: var(--app-empty-bg);
    color: var(--app-empty-text);
    padding: calc(var(--app-spacing) * 0.875) var(--app-spacing);
    display: grid;
    gap: calc(var(--app-spacing) * 0.35);
    text-align: center;
  }

  .app-empty-state[data-size="compact"] {
    padding: calc(var(--app-spacing) * 0.625) calc(var(--app-spacing) * 0.75);
    gap: calc(var(--app-spacing) * 0.25);
  }

  .app-empty-state[data-align="left"] {
    text-align: left;
  }

  .app-empty-state-message {
    margin: 0;
    color: var(--app-empty-text);
    font-size: 0.95rem;
    line-height: 1.4;
  }

  .app-empty-state-hint {
    margin: 0;
    color: var(--app-empty-hint);
    font-size: 0.85rem;
    line-height: 1.3;
  }

  .app-empty-state-action {
    justify-self: center;
    margin-top: calc(var(--app-spacing) * 0.15);
  }

  .app-empty-state[data-align="left"] .app-empty-state-action {
    justify-self: start;
  }
}