.context-switch-card {
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.context-switch-card:hover,
.context-switch-card:focus-visible {
    box-shadow: 0 8px 24px color-mix(in oklab, var(--color-base-content) 10%, transparent);
}

.context-switch-card--project:hover,
.context-switch-card--project:focus-visible {
    border-color: color-mix(in oklab, var(--color-primary) 55%, var(--color-base-300));
    background-color: color-mix(in oklab, var(--color-primary) 7%, var(--color-base-100));
}

.context-switch-card--route:hover,
.context-switch-card--route:focus-visible {
    border-color: var(--color-primary);
    background-color: color-mix(in oklab, var(--color-primary) 12%, var(--color-base-100));
}

.context-switch-card__icon {
    transition: background-color 0.2s ease, color 0.2s ease;
}

.context-switch-card--project:hover .context-switch-card__icon--project,
.context-switch-card--project:focus-visible .context-switch-card__icon--project {
    background-color: var(--color-primary);
    color: var(--color-primary-content);
}

.context-switch-card--route:hover .context-switch-card__icon--route,
.context-switch-card--route:focus-visible .context-switch-card__icon--route {
    background-color: var(--color-primary);
    color: var(--color-primary-content);
}

#planning-context-drawer:checked ~ .drawer-side {
    pointer-events: auto;
    visibility: visible;
    overflow-y: auto;
    opacity: 1;
}

#planning-context-drawer:checked ~ .drawer-side > :not(.drawer-overlay) {
    translate: 0;
}