.dice-holder {
    height: var(--dice-size);
    width: var(--dice-size);
    border-radius: 0.5em;
    border: 0.1em dashed var(--color-borders);
    background-color: var(--color-dice-holder-empty);
    overflow: hidden;
}

.dice-holder:has(> .die) {
    border: none;
}

.dice-holder.locked {
    background-color: var(--color-dice-holder-locked);
    border-style: solid;
}

.dice-holder.locked::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f023";
    color: var(--color-text);
    position: relative;
    top: calc(var(--dice-size) / 2 - 0.5em);
    left: calc(var(--dice-size) / 2 - 0.5em);
}

.dice-holder.can-drop {
    cursor: pointer;
    animation: can_drop_animation 3s infinite;
}

@keyframes can_drop_animation {
    0%, 100% { box-shadow: inset 0 0 calc(var(--dice-size) / 3) 0em var(--color-tab-hover); }
    50% { box-shadow: inset 0 0 calc(var(--dice-size) / 3) calc(var(--dice-size) / 6) var(--color-tab-hover);}
}