/**
    Applies all the outline properties useful to show a dashed-focus ring around a component.
    TODO: replace `$border-radius: 0.1rem` with semantic border-radius but keep in mind some components that must stay at 2px border-radius: checkbox, radio, links, ...
 */
:host {
  --wcs-grid-gap: 0;
  --wcs-grid-vertical-align: middle;
  --wcs-grid-outline-color: var(--wcs-semantic-color-border-focus-base);
  --wcs-grid-cell-text-color: var(--wcs-semantic-color-text-secondary);
  --wcs-grid-cell-padding-horizontal: var(--wcs-semantic-spacing-large);
  --wcs-grid-cell-padding-vertical: var(--wcs-semantic-spacing-base);
  --wcs-grid-cell-border-bottom: none;
  --wcs-grid-cell-separator-border: none;
  --wcs-grid-first-cell-border-radius: 0;
  --wcs-grid-last-cell-border-radius: 0;
  --wcs-grid-highlight-color: var(--wcs-semantic-color-background-surface-accent-lighter);
  --wcs-grid-row-background-color: var(--wcs-semantic-color-background-surface-primary);
  --wcs-grid-row-odd-background-color: var(--wcs-grid-row-background-color);
  --wcs-grid-row-even-background-color: var(--wcs-semantic-color-background-surface-accent-lightest);
  /* Grid headers for grid-columns */
  --wcs-grid-header-background-color-default: var(--wcs-semantic-color-background-action-secondary-default);
  --wcs-grid-header-background-color-hover: var(--wcs-semantic-color-background-action-secondary-hover);
  --wcs-grid-header-background-color-press: var(--wcs-semantic-color-background-action-secondary-press);
  --wcs-grid-header-text-color: var(--wcs-semantic-color-text-primary);
  --wcs-grid-header-font-weight: var(--wcs-semantic-font-weight-heavy);
  --wcs-grid-header-font-size: var(--wcs-semantic-font-size-label-1);
  --wcs-grid-header-line-height: var(--wcs-primitive-font-line-height-140);
  --wcs-grid-header-padding-vertical: var(--wcs-semantic-spacing-base);
  --wcs-grid-header-padding-horizontal: var(--wcs-semantic-spacing-large);
  --wcs-grid-header-border-left: none;
  --wcs-grid-header-border-radius: 0;
  --wcs-grid-header-border-bottom: solid var(--wcs-semantic-border-width-default) var(--wcs-semantic-color-border-secondary);
  --wcs-grid-header-transition-duration: var(--wcs-semantic-motion-duration-feedback-fast);
  --wcs-grid-first-header-background-color: var(--wcs-semantic-color-background-action-secondary-default);
  --wcs-grid-first-header-border-radius: 0;
  --wcs-grid-last-header-border-radius: 0;
  --wcs-grid-column-selection-width: calc(5 * var(--wcs-semantic-spacing-base));
  --wcs-grid-header-sort-arrow-color-default: var(--wcs-semantic-color-foreground-action-neutral-default);
  --wcs-grid-header-sort-arrow-color-hover: var(--wcs-semantic-color-foreground-action-neutral-hover);
  display: block;
}
:host th {
  border-radius: var(--wcs-grid-first-header-border-radius);
  background-color: var(--wcs-grid-first-header-background-color);
}
:host ::slotted([slot=grid-column]:first-child) {
  --wcs-grid-header-border-left: none;
}
:host :host([selection]) ::slotted([slot=grid-column]:first-child) {
  --wcs-component-grid-header-border-radius-first: 0;
  --wcs-grid-header-border-left: var(--wcs-grid-header-border-left);
}
:host table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: var(--wcs-grid-gap);
}
:host table thead {
  border-bottom: var(--wcs-grid-header-border-bottom);
}
:host table tbody {
  vertical-align: var(--wcs-grid-vertical-align);
}
:host td {
  color: var(--wcs-grid-cell-text-color);
  margin: 0;
  padding: var(--wcs-grid-cell-padding-vertical) var(--wcs-grid-cell-padding-horizontal);
}
:host td:focus-visible {
  outline: var(--wcs-semantic-border-width-large) dashed var(--wcs-grid-outline-color);
  outline-offset: 0;
  border-radius: 0.1rem;
}
:host td:first-child {
  border-radius: var(--wcs-grid-first-cell-border-radius);
}
:host td:last-child {
  border-radius: var(--wcs-grid-last-cell-border-radius);
}
:host td:not(:first-child) {
  border-left: var(--wcs-grid-cell-separator-border);
}
:host tr {
  background-color: var(--wcs-grid-row-background-color);
}
:host tr:nth-child(odd) {
  background-color: var(--wcs-grid-row-odd-background-color, var(--wcs-grid-row-background-color));
}
:host tr:nth-child(even) {
  background-color: var(--wcs-grid-row-even-background-color, var(--wcs-grid-row-background-color));
}
:host tr:not(:last-child) td {
  border-bottom: var(--wcs-grid-cell-border-bottom);
}
:host .wcs-grid-selection-column {
  padding: var(--wcs-grid-cell-padding-vertical) var(--wcs-grid-cell-padding-horizontal);
  width: var(--wcs-grid-column-selection-width);
  text-align: start;
}
:host tr.selected {
  background-color: var(--wcs-grid-highlight-color);
}
:host .loading {
  text-align: center;
}