@media (max-width: 768px) {

    .tooltip,
    .context-menu {
        display: none !important;
    }
    .header__sidebar-toggle button svg {
        transition: opacity 0.15s ease, transform 0.15s ease;
    }
    body:has(.sidebar.visible) .header__sidebar-toggle button svg {
        opacity: 0;
        transform: scale(0.5);
    }
    .header__sidebar-toggle button::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: FontAwesome;
        font-size: 18px;
        opacity: 0;
        pointer-events: none;
    }
    body:has(.sidebar.visible) .header__sidebar-toggle button::after {
        content: '\f00d';
        opacity: 1;
        animation: sidebarCloseIconPop 0.28s ease;
    }
    .sidebar {
        position: fixed;
        top: var(--topbar-height);
        left: -100%;
        width: 100%;
        height: calc(100% - var(--topbar-height));
        border-radius: 0;
        border-right: none;
    }
}
@keyframes sidebarCloseIconPop {
    0% { transform: scale(0.5); opacity: 0.4; }
    60% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}