.heatmap {
    display: grid;
    width: 100%;
    background: transparent;
    gap: var(--space-2);
}

.heatmap__grid {
    position: relative;
    display: flex;
    width: 100%;
    background: linear-gradient(
        120deg,
        color-mix(in srgb, var(--color-action-soft) 82%, var(--color-action)),
        color-mix(in srgb, var(--color-wrong-soft) 82%, var(--color-wrong)),
        color-mix(in srgb, var(--color-correct-soft) 82%, var(--color-correct)),
        color-mix(in srgb, var(--color-attention-soft) 82%, var(--color-attention)),
        color-mix(in srgb, var(--color-wrong-soft) 82%, var(--color-wrong)),
        var(--color-surface-muted),
        color-mix(in srgb, var(--color-correct-soft) 82%, var(--color-correct)),
        color-mix(in srgb, var(--color-action-soft) 82%, var(--color-action)));
    background-position: 0 50%;
    background-size: 300% 300%;
    align-content: flex-start;
    flex-wrap: wrap;
    gap: 0;
    overflow: hidden;
    border: var(--border-width) solid var(--color-border-strong);
    pointer-events: none;
    user-select: none;
    animation: heatmap-gradient var(--duration-shimmer) var(--ease) infinite;
}

.heatmap__square {
    width: var(--space-3);
    height: var(--space-2);
    border: 0;
    border-radius: var(--radius-none);
    flex: none;
}

.heatmap__square--new {
    background: transparent;
}

.heatmap__square--active {
    background: var(--heat-1);
}

.heatmap__square--cooling {
    background: var(--heat-2);
}

.heatmap__square--review {
    background: var(--heat-3);
}

.heatmap__square--mastered {
    background: var(--heat-5);
}

.heatmap__preview {
    position: absolute;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-surface) 82%, transparent);
    color: var(--color-text-muted);
    font-size: var(--text-md);
    font-weight: var(--weight-regular);
    box-shadow: var(--shadow-sm);
    animation: heatmap-preview var(--duration-preview-medium) var(--ease) both;
}

.heatmap__preview--duration-1 {
    animation-duration: var(--duration-preview-short);
}

.heatmap__preview--duration-2 {
    animation-duration: var(--duration-preview-medium);
}

.heatmap__preview--duration-3 {
    animation-duration: var(--duration-preview-long);
}

.heatmap__preview--position-1 {
    top: 12%;
    left: 8%;
}

.heatmap__preview--position-2 {
    top: 18%;
    left: 38%;
}

.heatmap__preview--position-3 {
    top: 10%;
    left: 72%;
}

.heatmap__preview--position-4 {
    top: 42%;
    left: 18%;
}

.heatmap__preview--position-5 {
    top: 48%;
    left: 58%;
}

.heatmap__preview--position-6 {
    top: 68%;
    left: 6%;
}

.heatmap__preview--position-7 {
    top: 72%;
    left: 42%;
}

.heatmap__preview--position-8 {
    top: 64%;
    left: 76%;
}

.heatmap__empty {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.heatmap__hint {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

@keyframes heatmap-gradient {
    0%, 100% {
        background-position: 0 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

@keyframes heatmap-preview {
    0%, 100% {
        opacity: 0;
        transform: translateY(var(--space-1));
    }

    16%, 78% {
        opacity: 0.82;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .heatmap__grid {
        animation: none;
        background-position: 50% 50%;
    }

    .heatmap__preview {
        animation: none;
        opacity: 0.82;
    }
}