.month-grid .day {
    position: relative;
}

.month-grid .day.available::after {
    content: attr(data-tooltip);
    position: absolute;
    background: var(--color-background-primary);
    border-radius: var(--border-radius);
    left: calc(100% + 4px);
    top: 50%;
    transform: translateY(-50%);
    padding: var(--gap-s);
    pointer-events: none;
    opacity: 0;
    font-size: 16px;
    /* width: 256px; */
    z-index: 30;
    color: var(--color-primary-red);
    text-wrap: nowrap;
}

.month-grid .day:not(.soft-selected):not(.selected):hover::after,
.month-grid .day:not(.soft-selected):not(.selected):focus-visible::after {
    opacity: 1;
    z-index: 30;
}

.month-grid .day {
    position: relative;
    cursor: context-menu;
    z-index: 1;
    text-decoration: none;
}

.month-grid .day:not(.soft-selected):not(.selected):hover,
.month-grid .day:not(.soft-selected):not(.selected):focus-visible {
    z-index: 20;
}