:host {
  width: 100%;
  border-radius: var(--radius);
  background-color: var(--default-bg);
  overflow: hidden;
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.08), 0 2px 3px rgba(0,0,0,0.12);
}

.table {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-spacing: 0;
  border-collapse: collapse;
  color: var(--font-color);
}

.table-title {
  font-size: 1.2rem;
  margin: 0.5em;
}

.td,
.th {
  font-weight: normal;
  text-align: left;
  padding: 1rem 2.5rem 1rem 1rem;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: var(--default-highlight);
}

.th {
  font-size: 0.8rem;
  opacity: 0.8;
}

.td {
  font-size: 0.9rem;
}

tr {
  transition: background-color 0.3s;
}

tbody tr:hover {
  background-color: var(--default-highlight);
}

tbody tr:hover .controls {
  opacity: 1;
}

.rowItemArrayItem {
  margin: 0 .5em 0.5em 0;
  border-width: 1px;
  border-style: solid;
  border-color: var(--default-shade);
  border-radius: var(--radius);
  padding: 0.25em 0.5em;
  font-size: 0.8rem;
  white-space: pre-wrap;
}

.controls {
  opacity: 0;
}

.trClickable {
  cursor: pointer;
}

:host(.primary) {
  background-color: var(--primary-color);
  color: var(--primary-text-color);
}
:host(.primary) .table {
  color: var(--primary-text-color);
}
:host(.primary) tbody tr:hover {
  background-color: var(--primary-shade);
}
:host(.primary) td,
:host(.primary) th,
:host(.primary) .rowItemArrayItem  {
  border-color: var(--primary-highlight);
}

:host(.secondary) {
  background-color: var(--secondary-color);
  color: var(--secondary-text-color);
}
:host(.secondary) .table {
  color: var(--secondary-text-color);
}
:host(.secondary) tbody tr:hover {
  background-color: var(--secondary-shade);
}
:host(.secondary) td,
:host(.secondary) th,
:host(.secondary) .rowItemArrayItem  {
  border-color: var(--secondary-highlight);
}

:host(.success) {
  background-color: var(--success-color);
  color: var(--success-text-color);
}
:host(.success) .table {
  color: var(--success-text-color);
}
:host(.success) tbody tr:hover {
  background-color: var(--success-shade);
}
:host(.success) td,
:host(.success) th,
:host(.success) .rowItemArrayItem  {
  border-color: var(--success-highlight);
}

:host(.warning) {
  background-color: var(--warning-color);
  color: var(--warning-text-color);
}
:host(.warning) .table {
  color: var(--warning-text-color);
}
:host(.warning) tbody tr:hover {
  background-color: var(--warning-shade);
}
:host(.warning) td,
:host(.warning) th,
:host(.warning) .rowItemArrayItem  {
  border-color: var(--warning-highlight);
}

:host(.danger) {
  background-color: var(--danger-color);
  color: var(--danger-text-color);
}
:host(.danger) .table {
  color: var(--danger-text-color);
}
:host(.danger) tbody tr:hover {
  background-color: var(--danger-shade);
}
:host(.danger) td,
:host(.danger) th,
:host(.danger) .rowItemArrayItem  {
  border-color: var(--danger-highlight);
}

:host(.dark) {
  background-color: var(--dark-color);
  color: var(--dark-text-color);
}
:host(.dark) .table {
  color: var(--dark-text-color);
}
:host(.dark) tbody tr:hover {
  background-color: var(--dark-shade);
}
:host(.dark) td,
:host(.dark) th,
:host(.dark) .rowItemArrayItem  {
  border-color: var(--dark-highlight);
}

:host(.light) {
  background-color: var(--light-color);
  color: var(--light-text-color);
}
:host(.light) .table {
  color: var(--light-text-color);
}
:host(.light) tbody tr:hover {
  background-color: var(--light-shade);
}
:host(.light) td,
:host(.light) th,
:host(.light) .rowItemArrayItem  {
  border-color: var(--light-highlight);
}