@import 'style.css';

.vae-img-container {
  display: flex;
  justify-content: center;
  align-items: center;

  >img {
    width: 100%;

    border-radius: 6px;
  }
}

/* -------------------- Stats -------------------- */
.stat-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.stat-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;

  .stat-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;
  }

  .stat-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-img-container>img {
    border-radius: 12px;
  }
}