.storage-box-grid {
    grid-gap: 0.25rem;
}

.storage-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 84px;
    padding: 0.15rem;
    background: black;
    border: 2px solid hsla(150, 5%, 65%, 0.5);
    cursor: pointer;
    overflow: hidden;
}

.storage-slot-name {
    font-size: 0.45rem;
    color: hsla(215, 0%, 100%, 1);
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.storage-slot.is-empty {
    border-style: dashed;
    opacity: 0.5;
}

.storage-slot.is-held,
.storage-slot.is-previewing {
    border-color: hsl(185 100% 50%);
    box-shadow: 0 0 12px hsl(185 100% 50% / 0.85);
}

.storage-slot.is-selected {
    border-color: hsl(120 60% 50%);
    box-shadow: 0 0 8px hsl(120 60% 50% / 0.75);
}

.storage-slot.is-selected.is-previewing {
    border-color: hsl(120 60% 50%);
    box-shadow: 0 0 8px hsl(120 60% 50% / 0.75), 0 0 12px hsl(185 100% 50% / 0.85);
}

button.storage-slot {
    font: inherit;
    color: inherit;
    appearance: none;
}

.storage-slot-level {
    font-size: 0.5rem;
    color: hsla(215, 0%, 100%, 1);
}

.storage-details-placeholder {
    text-align: center;
    color: hsla(150, 5%, 75%, 1);
}