@layer ll-service-extension.components {
  .ll-service-extension .ll-se-data-grid {
    max-inline-size: 100%;
    overflow: auto;
    background: var(--ll-se-color-surface-raised);
    border: 0.0625rem solid var(--ll-se-color-border);
    border-radius: var(--ll-se-radius-md);
  }

  .ll-service-extension .ll-se-data-grid table {
    inline-size: 100%;
    min-inline-size: 42rem;
    border-collapse: collapse;
  }

  .ll-service-extension .ll-se-data-grid caption {
    padding: var(--ll-se-space-3) var(--ll-se-space-4);
    color: var(--ll-se-color-text-primary);
    font-weight: 700;
    text-align: start;
  }

  .ll-service-extension .ll-se-data-grid :where(th, td) {
    max-inline-size: 24rem;
    padding: var(--ll-se-space-3) var(--ll-se-space-4);
    overflow-wrap: anywhere;
    text-align: start;
    vertical-align: top;
    border-block-start: 0.0625rem solid var(--ll-se-color-border);
  }

  .ll-service-extension .ll-se-data-grid th {
    color: var(--ll-se-color-text-secondary);
    background: var(--ll-se-color-surface-subtle);
  }

  .ll-service-extension .ll-se-data-grid [data-ll-grid-sort] {
    padding: var(--ll-se-space-1);
    color: inherit;
    font-weight: inherit;
    cursor: pointer;
    background: transparent;
    border: 0;
  }

  .ll-service-extension .ll-se-data-grid [data-ll-grid-sort]:disabled {
    color: var(--ll-se-color-text-muted);
    cursor: not-allowed;
  }
}