:root {
  --list-gap: 0.2em;
}

.inline {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--list-gap);
}

details > summary {
  	border-bottom: none !important;
  	list-style-type: none;
}

details > summary::-webkit-details-marker {
  display: none;
}

.unstyled ul {
  list-style-type:none;
  margin-left:-3.2em;
  font-size: 0.8em;
}

.inline {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--list-gap);
}

.inline li:not(:last-child)::after {
  content: '•';
  font-variant-emoji: text;
  position: relative;
  margin-left: var(--list-gap);
  display: inline-block;
  font-size:0.7em;
}

summary img {
  border: 1px solid var(--colorPrimary);
}

details > summary {
	padding: 0.2em 0;
	margin: -0.1em -0.1em;
}

h3 {
  margin: auto;
}

rec-info {
  margin:auto;
  margin-left:0;
  vertical-align:middle;
  display:flex;
  flex-direction:column;
}

rec-name {
  font-variant-emoji: text;
  color: var(--colorLink);
}

rec-name:hover {
	color: var(--colorPrimary);
	background-color: var(--colorPrimary) !important;
}

.tag[data-filter="all"].active {
	background-color: #4CAF50;
	color: white;
}

.hidden {
	display: none;
}

.media-entry {
  width:100%;
  margin: 0 1.6em 0em 0em;
}

.tag-filter > button {
  font-family: var(--fontText);
  cursor: pointer;
  background: var(--colorPrimary);
  border: 1px solid var(--colorBorder);
  border-radius: 2px;
  color: var(--colorText);
  padding: 4px 8px;
  transition-property: color, background-color, text-decoration-color;
  transition-duration: 150ms;
  text-transform:lowercase;

  &:hover {
    color: var(--colorSecondary);
    border-style: solid;
  }
  &.active {
    color: var(--colorBackground);
    background-color: var(--colorSecondary);
  }
}

details#filters {
  margin-block: 12px;
  border: 1px solid var(--colorBorder);
  summary {
    cursor: pointer;
    color: var(--colorText);
    font-weight: bold;
    padding: 4px 8px;
    background-color: var(--colorPrimary);
    border: 1px solid var(--colorBorder);
    transition-property: background-color, color, text-decoration-color,
      border-color;
    transition-duration: 150ms;
    &:hover {
      color: var(--colorSecondary);
    }
  }
  details-content {
    padding: 10px;
    display: block;
  }
  &[open] {
    margin-bottom: 8px;
    summary {
      background-color: var(--colorSecondary);
      color: var(--colorBackground);
    }
  }
}