/* Base styles for toggle buttons */
.leftPanelToggle,
.rightPanelToggle {
  position: fixed;
  top: 125px;
  z-index: var(--z-panel-toggle-button);
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, rgba(14, 24, 40, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
  border: 1px solid var(--mantine-color-dark-4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Left panel toggle specific styles */
.leftPanelToggle {
  left: 310px;
  border-radius: 0 50% 50% 0;
}

.leftPanelToggle.collapsed {
  left: 10px;
}

/* Right panel toggle specific styles */
.rightPanelToggle {
  top: 165px;
  border-radius: 50% 0 0 50%;
}

.rightPanelToggle.collapsed {
  right: 10px;
}

/* Hover states */
.leftPanelToggle:hover,
.rightPanelToggle:hover {
  background: linear-gradient(135deg, rgba(14, 24, 40, 1) 0%, rgba(30, 41, 59, 0.95) 100%);
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Icon styles */
.toggleIcon {
  color: var(--mantine-color-gray-3);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}

.leftPanelToggle:hover .toggleIcon,
.rightPanelToggle:hover .toggleIcon {
  color: var(--mantine-color-gray-1);
}