kata-table {
  display: block;
}

kata-table table {
  width: 100%;
  border-collapse: collapse;
}

kata-table th {
  padding: var(--kata-space-sm) var(--kata-space-lg);
  font-size: var(--kata-font-size-sm);
  line-height: var(--kata-line-height-control);
  text-align: left;
  background-color: var(--kata-table-header-bg, transparent);
  border-bottom: 2px solid var(--kata-table-border-color, var(--kata-color-border, #dfe3e6));
  font-weight: 600;
}

kata-table td {
  padding: var(--kata-space-sm) var(--kata-space-lg);
  text-align: left;
  border-bottom: 1px solid var(--kata-table-border-color, var(--kata-color-border, #dfe3e6));
}

kata-table tbody tr:last-child td {
  border-bottom: 0;
}

kata-table tbody tr:hover td {
  background-color: var(--kata-table-hover-bg, var(--kata-color-surface-muted, #f5f5f5));
}

/* Shadow DOM scope. CSS custom properties inherit from the host theme. */
:host {
  display: block;
}

:host table {
  width: 100%;
  border-collapse: collapse;
}

:host th {
  padding: var(--kata-space-sm) var(--kata-space-lg);
  font-size: var(--kata-font-size-sm);
  line-height: var(--kata-line-height-control);
  text-align: left;
  background-color: var(--kata-table-header-bg, transparent);
  border-bottom: 2px solid var(--kata-table-border-color, var(--kata-color-border, #dfe3e6));
  font-weight: 600;
}

:host td {
  padding: var(--kata-space-sm) var(--kata-space-lg);
  text-align: left;
  border-bottom: 1px solid var(--kata-table-border-color, var(--kata-color-border, #dfe3e6));
}

:host tbody tr:last-child td {
  border-bottom: 0;
}

:host tbody tr:hover td {
  background-color: var(--kata-table-hover-bg, var(--kata-color-surface-muted, #f5f5f5));
}