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