/**
    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 {
  /* All css variables are in grid.scss.
     Any variable can be overridden here for a single grid-column by using the correct selector in CSS */
  display: contents;
}
:host th {
  color: var(--wcs-grid-header-text-color);
  background-color: var(--wcs-grid-header-background-color-default);
  border-bottom: var(--wcs-grid-header-border-bottom);
  border-left: var(--wcs-grid-header-border-left);
  border-radius: var(--wcs-grid-header-border-radius);
  padding: var(--wcs-grid-header-padding-vertical) var(--wcs-grid-header-padding-horizontal);
  text-align: left;
  align-content: center;
  transition: background-color var(--wcs-grid-header-transition-duration) ease-in-out;
  /* Hovered grid header */
  /* Pressed grid header */
  /* Grid header with asc or desc sort-config */
  /* Hovered grid header, not sorted yet */
}
:host th .grid-column-th-content {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: none;
  outline: none;
  margin: 0;
  padding: 0;
  font-size: var(--wcs-grid-header-font-size);
  line-height: var(--wcs-grid-header-line-height);
  color: var(--wcs-grid-header-text-color);
  cursor: inherit;
  display: inline-flex;
  border-collapse: separate;
  font-family: inherit;
  text-align: left;
  align-items: center;
  gap: var(--wcs-semantic-spacing-base);
}
:host th .grid-column-th-content span {
  font-weight: var(--wcs-grid-header-font-weight);
}
:host th[aria-sort]:hover {
  background-color: var(--wcs-grid-header-background-color-hover);
}
:host th[aria-sort]:active {
  background-color: var(--wcs-grid-header-background-color-press);
}
:host th[aria-sort=ascending], :host th[aria-sort=descending] {
  --wcs-grid-header-sort-arrow-color: var(--wcs-grid-header-sort-arrow-color-default);
}
:host th[aria-sort=none]:hover {
  --wcs-grid-header-sort-arrow-color: var(--wcs-grid-header-sort-arrow-color-hover);
}
:host th:focus-visible, :host th:has(:focus-visible) {
  outline: var(--wcs-semantic-border-width-large) dashed var(--wcs-grid-outline-color);
  outline-offset: 0;
  border-radius: 0.1rem;
}
@supports not selector(&:has(:focus-visible)) {
  :host th:focus-within {
    outline: var(--wcs-semantic-border-width-large) dashed var(--wcs-grid-outline-color);
    outline-offset: 0;
    border-radius: 0.1rem;
  }
}
:host .pointer {
  cursor: pointer;
}

:host([hidden]) {
  display: none !important;
}