/* Resizable Menus Styles */

/* Resize Handle Base */
.resize-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: ew-resize;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

/* Left Menu Resize Handle */
.resize-handle-left {
  right: 0;
  border-right: 1px solid transparent;
}

.resize-handle-left:hover {
  background-color: rgba(124, 58, 237, 0.1);
  border-right-color: #7c3aed;
}

.resize-handle-left:active {
  background-color: rgba(124, 58, 237, 0.2);
}

/* Right Menu Resize Handle */
.resize-handle-right {
  left: 0;
  border-left: 1px solid transparent;
}

.resize-handle-right:hover {
  background-color: rgba(124, 58, 237, 0.1);
  border-left-color: #7c3aed;
}

.resize-handle-right:active {
  background-color: rgba(124, 58, 237, 0.2);
}

/* Resize Handle Bar (visual indicator) */
.resize-handle-bar {
  width: 3px;
  height: 40px;
  background: linear-gradient(to bottom, 
    transparent 0%,
    #7c3aed 20%,
    #7c3aed 80%,
    transparent 100%
  );
  border-radius: 2px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.resize-handle:hover .resize-handle-bar {
  opacity: 0.6;
}

.resize-handle:active .resize-handle-bar {
  opacity: 1;
}

/* Make menus resizable */
.book-menu {
  position: relative;
  transition: none; /* Remove transition when resizing */
}

.book-toc {
  position: relative;
  transition: none;
}

/* Theme-specific styles */

/* Light Professional Theme */
body.sidebar-theme-light .resize-handle-left:hover {
  background-color: rgba(79, 70, 229, 0.1);
  border-right-color: #4f46e5;
}

body.sidebar-theme-light .resize-handle-right:hover {
  background-color: rgba(79, 70, 229, 0.1);
  border-left-color: #4f46e5;
}

body.sidebar-theme-light .resize-handle-bar {
  background: linear-gradient(to bottom, 
    transparent 0%,
    #4f46e5 20%,
    #4f46e5 80%,
    transparent 100%
  );
}

/* Ocean Blue Theme */
body.sidebar-theme-ocean .resize-handle-left:hover {
  background-color: rgba(2, 132, 199, 0.1);
  border-right-color: #0284c7;
}

body.sidebar-theme-ocean .resize-handle-right:hover {
  background-color: rgba(2, 132, 199, 0.1);
  border-left-color: #0284c7;
}

body.sidebar-theme-ocean .resize-handle-bar {
  background: linear-gradient(to bottom, 
    transparent 0%,
    #0284c7 20%,
    #0284c7 80%,
    transparent 100%
  );
}

/* Sunset Theme */
body.sidebar-theme-sunset .resize-handle-left:hover {
  background-color: rgba(234, 88, 12, 0.1);
  border-right-color: #ea580c;
}

body.sidebar-theme-sunset .resize-handle-right:hover {
  background-color: rgba(234, 88, 12, 0.1);
  border-left-color: #ea580c;
}

body.sidebar-theme-sunset .resize-handle-bar {
  background: linear-gradient(to bottom, 
    transparent 0%,
    #ea580c 20%,
    #ea580c 80%,
    transparent 100%
  );
}

/* Dark Mode Theme */
body.sidebar-theme-dark .resize-handle-left:hover {
  background-color: rgba(167, 139, 250, 0.1);
  border-right-color: #a78bfa;
}

body.sidebar-theme-dark .resize-handle-right:hover {
  background-color: rgba(167, 139, 250, 0.1);
  border-left-color: #a78bfa;
}

body.sidebar-theme-dark .resize-handle-bar {
  background: linear-gradient(to bottom, 
    transparent 0%,
    #a78bfa 20%,
    #a78bfa 80%,
    transparent 100%
  );
}

/* Minimal Gray Theme */
body.sidebar-theme-minimal .resize-handle-left:hover {
  background-color: rgba(75, 85, 99, 0.1);
  border-right-color: #4b5563;
}

body.sidebar-theme-minimal .resize-handle-right:hover {
  background-color: rgba(75, 85, 99, 0.1);
  border-left-color: #4b5563;
}

body.sidebar-theme-minimal .resize-handle-bar {
  background: linear-gradient(to bottom, 
    transparent 0%,
    #4b5563 20%,
    #4b5563 80%,
    transparent 100%
  );
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .resize-handle {
    display: none; /* Disable resizing on mobile */
  }
}

/* Visual feedback during resize */
body.resizing {
  cursor: ew-resize !important;
  user-select: none !important;
}

body.resizing * {
  cursor: ew-resize !important;
}