/**
 * @file
 * User generated tables.
 */

table {
  caption-side: bottom;
  color: var(--gray-800);
  vertical-align: top;
  width: 100%;
}

table caption {
  color: var(--gray-500);
  font-size: var(--font-size-0);
  font-style: italic;
  margin: 0;
  padding-block: var(--size-3);
  padding-inline: var(--size-6);
  text-align: left;
}

/* If the Venice Canal background is present, the caption text color
    changes to white. */

.bg-venice-canal.layout--onecol table caption {
  color: var(--white);
}

/* If the Santa Barbar Sand background is present, the caption text color
    changes to dark blue. */

.bg-santa-barbara-sand.layout--onecol table caption {
  color: var(--midnight-observatory);
}

table :where(a) {
  color: var(--ucla-blue);
}

table :where(a):hover {
  color: var(--silver-lake-reservoir);
  border-bottom: 1px solid var(--silver-lake-reservoir);
}

table :where(a):focus {
  box-shadow: 0 0 var(--white), 0 0 0 2px var(--ucla-blue), 0 0 var(--white);
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* For Patternlab demo purposes only. */

.pl-demo table {
  padding-block: var(--size-15) !important;
}

.pl-demo table {
  border-collapse: separate;
  border-spacing: 1px;
}

:where(thead) {
  background-color: var(--gray-100);
}

@media print {
  :where(thead) {
    display: table-header-group;
  }
}

@media print {
  :where(tr) {
    page-break-inside: avoid;
  }
}

:where(th) {
  font-size: var(--font-size-2);
  padding-block: var(--size-3);
  padding-inline: var(--size-6);
  text-align: inherit;
}

tbody tr {
  background-color: var(--white);
  border-bottom-width: 1px;
}

td {
  font-size: var(--font-size-2);
  padding-block: var(--size-3);
  padding-inline: var(--size-6);
}

/* Table no border */

.table--no-border thead {
  background-color: transparent;
}

.table--no-border tbody tr {
  background-color: transparent;
  border-bottom-width: 0;
}

/* Table striped */

.table--striped tbody tr:nth-child(odd) {
  background-color: var(--white);
}

.table--striped tbody tr:nth-child(even) {
  background-color: var(--gray-100);
}

/* Table hover */

.table--hover tbody tr:hover {
  background-color: var(--gray-100);
}

/* Table primary */

.table--primary {
  border-radius: var(--radius-2);
  overflow-x: auto;
}

.table--primary thead {
  background-color: var(--ucla-blue);
}

/* The table header colors changes to yellow when the Venice Canal
    background color is present. */

.bg-venice-canal.layout--onecol .table--primary thead {
  background-color: var(--chumash-soil);
}

.table--primary thead th {
  color: var(--white);
}

/* The header's text color changes to dark blue when the Venice Canal
      background color is present. */

.bg-venice-canal.layout--onecol .table--primary thead th {
  color: var(--midnight-observatory);
}

.table--primary tbody tr {
  background-color: var(--gray-100);
  border-bottom-color: var(--gray-200);
}

/* When the Santa Barbara Sand background color is present,
      the table row's background color is lighten a little. */

.bg-santa-barbara-sand.layout--onecol .table--primary tbody tr {
  background-color: var(--gray-50);
}

.table--primary td {
  color: var(--gray-900);
}

/* Table primary and striped */

.table--primary.table--striped tbody tr:nth-child(odd) {
  background-color: var(--gray-100);
}

.table--primary.table--striped tbody tr:nth-child(even) {
  background-color: var(--gray-200);
}

/* Table primary and hover */

.table--primary.table--hover thead tr {
  border-bottom-color: var(--topanga-creek);
  border-bottom-width: 1px;
}

.table--primary.table--hover tbody tr {
  background-color: var(--gray-100);
}

.table--primary.table--hover tbody tr:hover {
  background-color: var(--gray-200);
}

/* Table responsive */

.table--responsive {
  display: block;
  overflow-x: auto;
  width: 100%;
}

@media print {
  .table--responsive {
    display: table;
    overflow-x: visible;
  }
}

/* Tablefield formatting */

.field--widget-tablefield .filter-wrapper {
  display: none;
}