@import 'style.css';

.vae-choices {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 2rem;
}

.vc {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 165px;
  height: 140px;
  padding: 1em;

  border-radius: 25px;

  font-size: larger;
  font-weight: bold;
  color: white;
}

.vc-sky {
  color: black;

  background-color: skyblue;
}

.vc-purple {
  background-color: purple;
}

.vc-blue {
  background-color: #4472C4;
}

.vc-lime {
  background-color: #92D050;
}

.vc-green {
  background-color: green;
}

/* -------------------- Satisfaction gauge -------------------- */
.satisfaction-gauge {
  --sg-height: 100px;

  position: relative;

  display: flex;
  justify-content: center;
  align-items: end;

  height: var(--sg-height);
  aspect-ratio: 2 / 1;

  border: 2px solid black;
  border-radius: var(--sg-height) var(--sg-height) 0 0;

  background-image: linear-gradient(90deg, red, lime);

  overflow: hidden;

  .satisfaction-indicator {
    position: absolute;

    width: 1px;

    /* transform: rotate(45deg); */
    transform-origin: bottom;

    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: calc((var(--sg-height) * 80) / 100) solid black;
  }

  .satisfaction-gauge-bottom {
    position: absolute;

    width: 10%;
    aspect-ratio: 2 / 1;

    border-radius: var(--sg-height) var(--sg-height) 0 0;

    background-color: black;
  }
}

/* -------------------- Responsive -------------------- */
@media screen and (min-width: 838px) {
  .vae-choices {
    gap: 6rem;
  }
}