/**
  * @file
  * Tables in main content areas.
  **/

/** General table styles **/

/** Prevents large tables from pushing the entire main area below. Instead it will have a scroll bar. **/
.table-wrapper {
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}

.table-wrapper:focus-visible {
  outline: 1px solid var(--laurier-blue);
}

:is(.featured-top, .highlighted, .main-content, .featured-bottom) table thead {
  border: 1px solid var(--black);
  background-color: var(--light-grey);
  color: var(--black);
}

:is(.featured-top, .highlighted, .main-content, .featured-bottom) table tr {
  background: var(--white);
}

:is(.featured-top, .highlighted, .main-content, .featured-bottom) table th {
  border-left: 1px solid var(--grey);
  border-right: 1px solid var(--grey);
  border-top: 1px solid var(--grey);
  border-bottom: 2px solid var(--black);
  padding: 0.5em;
  background-color: var(--light-grey);
  color: var(--black);
  vertical-align: top;
}

:is(.featured-top, .highlighted, .main-content, .featured-bottom) table th a {
  color: var(--black);
}

:is(.featured-top, .highlighted, .main-content, .featured-bottom)
  table
  th
  a:is(:hover, :focus) {
  background-color: var(--laurier-purple);
  color: var(--white);
}

:is(.featured-top, .highlighted, .main-content, .featured-bottom) table tr td {
  border: 1px solid var(--grey);
  padding: 0.5em;
  vertical-align: top;
}

:is(.featured-top, .highlighted, .main-content, .featured-bottom)
  table
  tr:nth-child(odd)
  td {
  background: var(--grey);
}

:is(.featured-top, .highlighted, .main-content, .featured-bottom)
  table
  tr:is(:hover, :focus)
  td {
  background: var(--laurier-gold);
}

/** Icons for sorting on view tables **/
.tablesort {
  width: 14px;
  height: 14px;
  vertical-align: top;
  margin: 5px 0;
}

.tablesort--desc {
  background-image: url(../../images/icons/twistie-up-black.svg);
}

.tablesort--asc {
  background-image: url(../../images/icons/twistie-down-black.svg);
}

th a:is(:focus, :hover) .tablesort--desc {
  background-image: url(../../images/icons/twistie-up-white.svg);
}

th a:is(:focus, :hover) .tablesort--asc {
  background-image: url(../../images/icons/twistie-down-white.svg);
}

caption {
  color: var(--black);
  text-align: center;
}

/** Responsive tables allow to hide columns on smaller screens. **/
@media screen and (max-width: 37.5em) {
  /* 600px */
  th.priority-low,
  td.priority-low,
  th.priority-medium,
  td.priority-medium {
    display: none;
  }
}

@media screen and (max-width: 60em) {
  /* 920px */
  th.priority-low,
  td.priority-low {
    display: none;
  }
}