@import url("./style.css");
:root {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.fixed-right {
  position: fixed;
  top: 10%;
  right: 2ch;
  left: 0;
  bottom: 10%;
  width: 100vw;
  background-color: var(--clr-primary);
  padding: 1em;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 1em;
  display: grid;
  grid-template-columns: 2em 6fr;
  grid-template-rows: repeat(3, auto);
  transition: transform 250ms ease-in-out;
  z-index: 1000;
}
.collapsed {
  transform: translateX(89vw);
  overflow-y: hidden;
}
.vote-title {
  grid-column-start: 2;
  grid-column-end: -1;
}
.collapse {
  grid-area: 1/1;
  max-width: 1.25em;
  cursor: pointer;
}
.collapse img {
  width: 1.25em;
  height: 1.25em;
}
.vote-paragraph {
  grid-row-start: 2;
  grid-column-start: 1;
  grid-column-end: 2;
  width: max-content;
  padding-inline-start: 11.5ch;
  padding-inline-end: 20ch;
  font-size: 1.5em;
  max-height: 1.5em;
  transform: rotate(270deg) translateX(-100%);
  transform-origin: left top;
}
.vote-paragraph:hover {
  font-stretch: wider;
  color: var(--clr-accent);
  cursor: pointer;
}
.vote-form {
  position: relative;
  width: 100vw;
  grid-column-start: 2;
  grid-row-start: 2;
  grid-column-end: -1;
}

.vote-items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5em;
  padding: 2em;
}
.vote-items div {
  display: grid;
  grid-template-columns: 1fr 0.25fr;
  max-width: 100vw;
}
.vote-form-choir label {
  margin-inline-end: 0.5em;
  margin-block: 0.5em;
}
.vote-form button {
  grid-column-start: 1;
  grid-column-end: 3;
  margin-inline: auto;
  display: unset;
}

@media screen and (max-height: 480px) and (orientation: landscape) {
  .fixed-right {
    top: 5%;
    bottom: 5%;
  }
  .collapsed {
    transform: translateX(94vw);
  }
  .vote-paragraph {
    padding-inline-start: 4.5ch;
    padding-inline-end: 5ch;
  }
}
@media screen and (min-width: 684px) and (max-width: 900px) {
  .collapsed {
    transform: translateX(94vw);
  }
}
@media screen and (min-width: 901px) and (max-width: 1024px) {
  .collapsed {
    transform: translateX(96vw);
  }
  .vote-paragraph {
    padding-inline-start: 10ch;
    padding-inline-end: 10ch;
  }
}
@media screen and (min-width: 1025px) {
  .fixed-right {
    top: 15%;
    bottom: 15%;
    left: calc(100vw - 60ch);
    width: 60ch;
  }
  .collapsed {
    transform: translateX(53.5ch);
  }
  .vote-form {
    width: 60ch;
  }
  .vote-form .form-message {
    padding: 1em;
    max-width: 40ch;
  }
  .vote-items div {
    max-width: 60ch;
  }
  .vote-paragraph {
    padding-inline-end: 15ch;
  }
}

/*
////////////////////////////////
*/
.show-results {
  max-height: 100vh;
  overflow-y: scroll;
}
.result-item {
  list-style: none;
  display: grid;
  grid-template-columns: 2fr 1fr;
  border: 1px solid black;
  padding: 0.5em 1em;
  font-size: 1.75em;
}
.result-item:nth-child(2n + 1) {
  background-color: gainsboro;
}
.result-item:nth-child(2n) {
  background-color: aliceblue;
}