@import '/styles/quixx/quixx.css';

.score-calculator {
  width: 100%;
  max-width: 480px;
  border-spacing: 0;
  font-size: 5vw;
  table-layout: fixed;
}

.score-calculator td {
  padding: 2.5vw;
}
.score-calculator tr td:last-child,
th.score-total__output {
  text-align: right;
  padding-right: 20vw;
}

.score-total th {
  border-top: 1vw solid black;
}

.score-calculator input,
.score-calculator button {
  font-size: 5vw;
  width: 100%;
  border-radius: 2vw;
}
.score-calculator input {
  border: none;
  background-color: white;
  opacity: 0.9;
  text-align: right;
}
.score-calculator button {
  border-color: black;
  border-style: solid;
}

/* Calculate vw values at max-width. */
@media screen and (min-width: 480px) {
  .score-calculator {
    font-size: 24px;
  }
  
  .score-calculator td {
    padding: 12px;
  }
  .score-calculator tr td:last-child,
  th.score-total__output {
    padding-right: 96px;
  }

  .score-total th {
    border-top-width: 4.8px;
  }
  
  .score-calculator input,
  .score-calculator button {
    font-size: 24px;
    border-radius: 9.6px;
  }
}

.score-red {
  background-color: var(--red);
}

.score-yellow {
  background-color: var(--yellow);
}

.score-green {
  background-color: var(--green);
}

.score-blue {
  background-color: var(--blue);
}

.score-penalty {
  background-color: var(--penalty);
}

.score-total {
  background-color: white;
}

.score-red__output,
.score-yellow__output,
.score-green__output,
.score-blue__output {
  color: black;
}