/* Shared Editor Component Styles */
.editor-component {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.editor-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Normal mode styling */
.editor-component .editor-content-area {
  border: none;
}

/* Fullscreen CSS overlay approach */
.editor-fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 9999 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 1rem !important;
}

.editor-fullscreen .editor-content-area {
  flex: 1 !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  padding: 2rem !important;
  border: none !important;
}

.editor-fullscreen .editor-container {
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* Hide body scroll when in fullscreen */
body.editor-fullscreen-active {
  overflow: hidden !important;
}

/* Toolbar styling in fullscreen */
.editor-fullscreen .prosemirror-toolbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
}

/* Hide enter button and show exit button in fullscreen */
.editor-fullscreen .fullscreen-enter-btn {
  display: none !important;
}

.editor-fullscreen .fullscreen-exit-btn {
  display: inline-flex !important;
}

/* ProseMirror toolbar active states */
.btn-active {
  background-color: hsl(var(--p));
  color: hsl(var(--pc));
}