.form-subject   { --color: hsl(217, 100%, 68%); }
.form-predicate { --color: hsl(6, 94%, 73%); }
.form-attribute { --color: hsl(114, 90%, 76%); }
.form-whatever  { --color: hsl(308, 90%, 76%); }
.form-whatever  { --color: hsl(28, 96%, 70%); }
.form-object    { --color: hsl(61, 96%, 70%); }
.word {
   position: relative;
   display: inline-block;
   padding: 0.05em 0.1em;
   margin-bottom: 1em;
   border-bottom: 3px dotted transparent;
   transition: background 0.4s ease, border 0.4s ease;
   cursor: pointer;
}
.word.translated {
   border-bottom-color: var(--color);
}
.word.overlay {
   position: relative;
   z-index: 10000;
}
/*
.word .verbum {
   display: block;
}
.word.translated .verbum {
   transform: scale(0.8);
}
*/
@media (hover: hover) {
   .word:hover {
      background-color: var(--surface-2);
   }
}


.translations {
   position: absolute;
   bottom: -1em;
   left: 0;
   width: 100%;
   height: 1em;
   display: grid;
   grid-auto-flow: column;
   grid-auto-columns: 100%;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   scrollbar-width: none; /* hide scrollbar on Firefox */
}
.translations::-webkit-scrollbar {
   width: 0;
   height: 0;
   display: none;
}
 
.translations :is(.arrow-left, .arrow-right) {
   position: fixed;
   bottom: -0.5em;
   transform: translateY(-50%);
   background: transparent;
   border: none;
   opacity: 0;
   transition: opacity 0.4s ease;
}
.translations:hover :is(.arrow-left, .arrow-right) {
   opacity: 1;
}
.translations .arrow-left {
   left: 0;
}
.translations .arrow-right {
   right: 0;
}
.translation {
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 0.4em;
   scroll-snap-align: center;
}