.dicepool {
    --dice-size: 50px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    background-color: #b9b5b3;
}

.dicepool-dice {
    width: var(--dice-size);
    height: var(--dice-size);
    border-radius: var(--border-radius);
    background-color: #e7e7e7;
    box-shadow: inset 0 calc(var(--dice-size) / 20) white,
        inset 0 calc(var(--dice-size) / -20) #bbb,
        inset calc(var(--dice-size) / 20) 0 #d7d7d7,
        inset calc(var(--dice-size) / -20) 0 #d7d7d7;
    padding: calc(var(--dice-size) / 20);
    display: grid;
    grid-template-areas:
        "a . c"
        "e g f"
        "d . b";
}

.dicepool-dice.evil {
    background-color: #333;
    box-shadow: inset 0 calc(var(--dice-size) / 20) black,
        inset 0 calc(var(--dice-size) / -20) #3b3b3b,
        inset calc(var(--dice-size) / 20) 0 #575757,
        inset calc(var(--dice-size) / -20) 0 #575757;
}

.dicepool-dice.used {
    filter: opacity(40%);
}
/*TODO: other color */
.dicepool-dice.active {
    box-shadow: 0 0 0 2px blue; /* box shadow doesnt take up space */
}
/*TODO: extra case for evil dice?*/

.dicepool-dice.selected {
    box-shadow: 0 0 0 2px yellow;
}

.pip {
    display: block;
    align-self: center;
    justify-self: center;
    width: calc(var(--dice-size) / 4);
    height: calc(var(--dice-size) / 4);
    border-radius: 50%;
    background-color: #333;
}

.dicepool-dice.evil>.pip {
    background-color: #e7e7e7;
}

.pip:not(.active) {
    display: none;
}

.pip.active:nth-of-type(2) {
    grid-area: b;
}

.pip.active:nth-of-type(3) {
    grid-area: c;
}

.pip.active:nth-of-type(4) {
    grid-area: d;
}

.pip.active:nth-of-type(5) {
    grid-area: e;
}

.pip.active:nth-of-type(6) {
    grid-area: f;
}

/* This selects the last pip of odd-valued dice (1, 3, 5) and positions the pip in the center */
/* Last of type: https://stackoverflow.com/a/75200868 */
.pip.active:nth-of-type(odd):has(+ :not(.pip.active)) {
    grid-area: g;
}

.dicepool-buttons {
    display: flex;
}