.calculator {
  position: relative;

  z-index: var(--bardic-z-indices-calculator-front);

  box-shadow: none;

  .result-box {
    min-height: 5rem;

    /* // This is needed for the shining, should probably abstract. */
    position: relative;
    overflow: hidden;

    .result {
      height: 100%;
      width: 100%;

      padding: 5px;

      display: grid;
      grid-template-areas:
        "explanation"
        "number";
      justify-content: center;

      background: var(--pico-background-color);

      .explanation {
        grid-area: explanation;
      }

      .number {
        grid-area: number;

        max-height: 2rem;
      }
    }
  }

  .branding {
    display: grid;

    gap: 5px;
    grid-template-areas:
      "powered-by logo"
      "bt-tagline logo";

    justify-items: end;
    grid-template-columns: auto 4rem;

    .powered-by {
      grid-area: powered-by;
    }

    .bt-tagline {
      grid-area: bt-tagline;
    }

    .logo {
      grid-area: logo;

      img {
        width: 100%;
        height: auto;
      }
    }
  }

  .answer-row-with-number {
    display: grid;
    grid-template-columns: auto 5rem;
  }

  .three-number-grid {
    display: grid;
    column-gap: 1rem;
    align-items: center;
    justify-items: center;
    grid-template-columns: repeat(3, 5rem);
    grid-template-rows: 1fr 5rem;
  }

  .dice-roll-input {
    display: grid;
    justify-items: center;
    grid-template-columns: 5rem 2rem 5rem 2rem 5rem;
  }
}

.shiner {
  position: absolute;
  top: 0;
  height: 100%;
  left: -100%;
  width: 30%;
  -webkit-text-fill-color: transparent;
  overflow: hidden;
}

.shine_first {
  animation: shine1 200ms 1 linear;
}

.shine_second {
  animation: shine2 200ms 1 linear;
}

@keyframes shine1 {
  0% {
    left: -10%;
  }

  100% {
    left: 110%;
  }
}

@keyframes shine2 {
  0% {
    left: -10%;
  }

  100% {
    left: 110%;
  }
}

@media screen and (width <=500px) {
  .calculator {
    .result-box {
      .result {
        grid-template-areas:
          "explanation"
          "number";
        justify-content: center;
      }
    }
  }
}

.darker-background {
  /* Picocss's regular background color, which we need for inputs and such */
  background-color: #13171f;
}

.calculator-previews {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  flex-direction: row;
}

.calculator-preview {
  --height: 26rem;
  --gap: 1rem;
  height: var(--height);
  width: 20rem;

  overflow: hidden;

  display: grid;
  gap: var(--gap);

  grid-template-areas:
    "title"
    "screenshot"
    "tagline";

  grid-template-rows: 3rem 20rem;

  background-size: cover;

  --transition: transform 300ms;
  transition: var(--transition);

  .screenshot {
    grid-area: screenshot;

    height: 100%;
    width: 100%;

    img {
      height: 100%;
      width: auto;
    }
  }

  .title {
    grid-area: title;
  }

  .tagline {
    transition: var(--transition);
    padding-top: 1rem;
    background-image: linear-gradient(
      0deg,
      var(--pico-background-color) 90%,
      transparent 100%
    );
  }
}

.calculator-preview:hover {
  transform: scale(1.02);

  .tagline {
    transform: translateY(calc(-100% - var(--gap)));
  }
}