/* PlaygroundLayout.css */
.playground-layout {
  min-height: 600px;
  height: calc(100vh - 80px); /* Adjusted since we removed the footer */
  width: 100%;
}

.content-container,
.documentation-container {
  height: 100%;
  max-height: 100%;
}

/* Remove unused styles */
.content-inner,
.documentation-inner {
  display: none;
}

/* Resize handle styling */
.resize-handle {
  width: 8px; /* Reduced from 12px */
  margin: 0 3px; /* Reduced from 6px */
  border-radius: 6px;
  cursor: col-resize;
  transition: background-color 0.2s;
  user-select: none;
  background-color: #e2e8f0; /* slate-200 for normal state */
  display: flex;
  align-items: center;
  justify-content: center;
}

.dark .resize-handle {
  background-color: #1e293b; /* dark:slate-800 for dark mode */
}

.resize-handle:hover,
.resize-handle:active {
  background-color: #0ea5e9; /* sky-500 for hover state */
}

.resize-handle-dots {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  opacity: 1; /* Always show dots */
}

.dot {
  width: 4px;
  height: 4px;
  background-color: #94a3b8; /* slate-400 for normal state */
  border-radius: 50%;
  margin: 2px 0;
  transition: background-color 0.2s;
}

.resize-handle:hover .dot,
.resize-handle:active .dot {
  background-color: white; /* Change dot color on hover */
} 