/* Menu side panel state transitions and collapsed/unavailable presentation. */

#workspace_root.menu-workspace #left_zone::after,
#workspace_root.menu-workspace #right_zone::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--menu-panel-shadow-size);
  pointer-events: none;
  opacity: 1;
  transition: opacity 180ms ease;
}

#workspace_root.menu-workspace #left_zone::after {
  left: 100%;
  background: linear-gradient(90deg, var(--menu-panel-shadow-color), transparent);
}

#workspace_root.menu-workspace #right_zone::before {
  right: 100%;
  background: linear-gradient(270deg, var(--menu-panel-shadow-color), transparent);
}

#workspace_root.menu-workspace.menu-left-collapsed #left_zone {
  transform: translateX(calc(-100% - var(--menu-panel-shadow-size)));
}

#workspace_root.menu-workspace.menu-left-unavailable #left_zone {
  pointer-events: none;
}

#workspace_root.menu-workspace.menu-right-collapsed #right_zone {
  transform: translateX(calc(100% + var(--menu-panel-shadow-size)));
}

#workspace_root.menu-workspace.menu-right-unavailable #right_zone {
  pointer-events: none;
}

.menu-left-shell,
.menu-right-shell {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.menu-side-expanded,
.menu-side-collapsed {
  width: 100%;
  height: 100%;
}

.menu-side-collapsed {
  display: none !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: var(--menu-shell-pad-top) 8px 0;
  background: var(--vk-app-surface-panel);
}

#workspace_root.menu-left-collapsed .menu-left-shell .menu-side-expanded,
#workspace_root.menu-right-collapsed .menu-right-shell .menu-side-expanded {
  display: flex;
}

#workspace_root.menu-left-collapsed .menu-left-shell .menu-side-collapsed,
#workspace_root.menu-right-collapsed .menu-right-shell .menu-side-collapsed {
  display: none !important;
}

#workspace_root.menu-left-unavailable .menu-left-shell .menu-side-collapsed,
#workspace_root.menu-left-unavailable .menu-floating-panel-open--left {
  display: none !important;
}

#workspace_root.menu-right-unavailable .menu-right-shell .menu-side-collapsed,
#workspace_root.menu-right-unavailable .menu-floating-panel-open--right {
  display: none !important;
}