.LP-Voting { $-block: &; font-family: $-primary-sans-serif-font; gap: 16PX; font-size: 42px; text-align: center; display: flex; flex-direction: row; flex-wrap: wrap; .LP-Headline { margin-bottom: 0; height: 33px; } &__Left { position: relative; } &__Choices { display: flex; flex-direction: row-reverse; justify-content: flex-end; margin-bottom: calc(1.5 * 18px); width: max-content; --indication-color: #{$-light-brown}; &:hover { --indication-color: #{$-beige}; } } &__Vote { color: $-beige; text-decoration: none; transition: color .4s; &:hover, &:hover ~ &, &:focus, &focus ~ & { color: $-grey; cursor: pointer; } &:hover { #{$-block}__Label { visibility: visible; } } &--overall { color: var(--indication-color); } } &__Label { position: absolute; visibility: hidden; height: 1.5em; left: 0px; width: 100%; text-align: center; top: 83px; background-color: white; color: $-grey; } &__Label, &__CurrentVote { font-size: 18px; font-weight: bold; } &__CurrentVote { margin-top: -29px; color: $-light-brown; } &__Date, &__Vote { font-weight: bold; } &__UserVote { #{$-block}__Vote { &, &:hover { color: black; cursor: unset; } } } &__Info{ font-size: 18px; display: flex; flex-direction: column; gap: 5px; &Label { display: block; } } }