:root {
  --verb-color: #080;
  --noun-color: #a09000;
  --adjective-color: #16d;
  --preposition-color: #922;
  --number-color: #18b;
  --question-word-color: #909;
  --particle-color: #a60;
}

.header-search {
  margin-top: 6px;
  margin-bottom: 6px;
  margin-right: 6px;

  border: 1px solid #ddd;
  border-radius: 10px;

  padding: 10px;
  padding-top: 6px;
  padding-bottom: 6px;

  width: 200px;

  text-decoration: none;
  font-size: 120%;
  color: inherit;
  background: inherit;
}


#dictionary-container {
  margin: 10px;
}

#search-container {
  margin: 20px;
  display: none;
}


.words-section {
  margin: 10px;
}

.words-section-title {
  font-weight: bold;
  font-size: 150%;
}

.words-section-empty .words-section-title {
  color: #888;
}

#words-section-other.words-section-empty {
  display: none;
}

.word, .search-word {
  margin-top: 10px;
  margin-bottom: 10px;

  border: 1px solid #555;
  border-radius: 10px;

  padding-left: 15px;
  padding-right: 15px;
  padding-top: 8px;
  padding-bottom: 10px;
}

.highlighted {
  animation: highlighting;
  animation-duration: 1s;
}

@keyframes highlighting {
  0% { background-color: inherit; }
  10% { background-color: var(--accent-color); }
  100% { background-color: inherit; }
}

.word[expanded=true] .word-details {
  display: block;
}

.word[expanded=false] .word-details {
  display: none;
}

.word-title, .search-word {
  cursor: pointer;
  display: flex;
}

.word-value, .search-word-value {
  font-size: 120%;
  font-weight: 550;
}

.word-type, .search-word-type {
  margin-left: 10px;

  border: 1px solid #0000;
  border-radius: 4px;

  padding: 4px;
  padding-top: 2px;
  padding-bottom: 2px;

  background-color: #8888;
  
  font-size: 90%;
}

.word-type[wordType=verb], .search-word-type[wordType=verb], .word-reference[wordType=verb]:hover {
  background-color: var(--verb-color);
}

.word-type[wordType=noun], .search-word-type[wordType=noun], .word-reference[wordType=noun]:hover {
  background-color: var(--noun-color);
}

.word-type[wordType=adjective], .search-word-type[wordType=adjective], .word-reference[wordType=adjective]:hover {
  background-color: var(--adjective-color);
}

.word-type[wordType=preposition], .search-word-type[wordType=preposition], .word-reference[wordType=preposition]:hover {
  background-color: var(--preposition-color);
}

.word-type[wordType=number], .search-word-type[wordType=number], .word-reference[wordType=number]:hover {
  background-color: var(--number-color);
}

.word-type[wordType="question word"], .search-word-type[wordType="question word"], .word-reference[wordType="question word"]:hover {
  background-color: var(--question-word-color);
}

.word-type[wordType=particle], .search-word-type[wordType=particle], .word-reference[wordType=particle]:hover {
  background-color: var(--particle-color);
}

.word-details {
  margin-top: 10px;
}

.word-translations::before {
  margin-right: 8px;

  content: "Übersetzungen:";
  font-weight: bold;
}

.word-translations {
  margin-top: 8px;
  display: flex;
}

.word-translation, .search-word-translation {
  margin-left: 5px;
}

.word-translation:first-child, .search-word-translation:first-child {
  margin-left: 0px;
}

.word-translation::after, .search-word-translation::after {
  content: ";"
}

.word-translation:last-child::after, .search-word-translation:last-child::after {
  content: "";
}

.word-description {
  margin-top: 8px;
}

/*.word-description::before {
  margin-right: 5px;

  content: "Beschreibung:";
  font-weight: bold;
}*/

.word-references::before {
  margin-right: 8px;

  content: "Siehe:";
  font-weight: bold;
}

.word-references {
  margin-top: 15px;
}

.word-reference {
  margin-left: 5px;

  border: 2px solid #8888;
  border-radius: 4px;

  padding: 5px;
  padding-top: 2px;
  padding-bottom: 3px;

  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.word-reference:first-child {
  margin-left: 0px;
}

.word-reference[wordType=verb] {
  border-color: var(--verb-color);
}

.word-reference[wordType=noun] {
  border-color: var(--noun-color);
}

.word-reference[wordType=adjective] {
  border-color: var(--adjective-color);
}

.word-reference[wordType=preposition] {
  border-color: var(--preposition-color);
}

.word-reference[wordType=number] {
  border-color: var(--number-color);
}

.word-reference[wordType="question word"] {
  border-color: var(--question-word-color);
}

.word-reference[wordType=particle] {
  border-color: var(--particle-color);
}

.word-reference:hover {
  text-decoration: underline;
}


.search-word-translations::before {
  margin-left: 8px;
  margin-right: 8px;

  content: "–";
}

.search-word-translations {
  margin-top: auto;
  margin-bottom: auto;

  display: flex;
}

.search-word-match {
  text-decoration: underline;
}

.search-word-value .search-word-match {
  font-weight: 700;
}

.search-word-translation .search-word-match {
  font-weight: 550;
}