:host {
  display: block;
  margin: auto;
  padding: 1em;
  max-width: 60em;
}
:host[hidden] {
  display: none;
}
:host > table {
	background-color: rgb(var(--smoothly-default-color));
  border: 1px solid rgb(var(--smoothly-medium-color));
  width: 100%;
}
:host > table > tr:hover {
	box-shadow: var(--smoothly-shadow);
	border-top-color: rgb(var(--smoothly-medium-color));
	border-bottom-color: rgb(var(--smoothly-medium-color));
}
:host > table > th {
  display: table-cell;
  text-align: left;
  padding: 0.3em .5em;
	text-transform: capitalize;
}
:host > table > tr > td:first-child,
:host > table > th:first-child {
	width: 10em;
}
:host > table > tr > td:nth-of-type(2),
:host > table > th:nth-of-type(2) {
	width: 30em;
}
:host > table > tr > td:first-child {
	display: inline-block;
}
:host > table > tr > td > *:not(section) {
	padding-left: .3em;
}
:host > table > tr > td > section > *:not(smoothly-icon) {
	padding: 0.5em 0.3em;
	width: max-content;
	min-width: 3em;
	display: inline-block;
  text-transform: capitalize;
}
:host > table > tr > td > section > smoothly-icon {
	display: inline-block;
	vertical-align: middle;
	margin-left: .3em;
}
:host > table > tr > td > .openable:hover {
	background-color: rgb(var(--smoothly-dark-shade));
	cursor: pointer;
}
.opened {
	box-sizing: border-box;
	border: solid 1px rgb(var(--smoothly-medium-shade));
	background-color: rgb(var(--smoothly-dark-shade));
	border-bottom: 2.5px solid rgb(var(--smoothly-dark-shade));
	margin-bottom: -2.2px;
	margin-top: -1px;
}
section.opened {
	border-left: none;
}
