/**
 * Left Sidebar Styles
 * Collapsible sidebar with toggle button
 */

.oppb-sidebar-left {
  width: var(--size-tree-width);
  display: flex;
  flex-direction: column;
  transition: width var(--transition-normal) ease-in-out;
  position: relative;
}

/* Collapsed state */
.oppb-sidebar-left--collapsed {
  width: 48px;
  overflow: hidden;
}

/* Sidebar toggle button */
.oppb-sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  background: var(--color-surface);
  border: none;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;

  &:hover {
    background: var(--color-surface-secondary);
    color: var(--color-text);
  }
}

.oppb-sidebar-toggle__content {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  font-size: 12px;
  font-weight: 500;
}

/* When collapsed, only show the icon */
.oppb-sidebar-left--collapsed .oppb-sidebar-toggle__label {
  display: none;
}

/* Sidebar content wrapper */
.oppb-sidebar-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Hide content when collapsed */
.oppb-sidebar-left--collapsed .oppb-sidebar-content {
  visibility: hidden;
  opacity: 0;
}
.oppb-sidebar-content h3, .oppb-sidebar-content h4 {
  margin-top: 0;
  margin-bottom: 0;

}
.oppb-sidebar-presets .oppb-presets-panel__subtitle {
	font-size: 11px;
	margin-top: 10px;
	margin-bottom: 5px;
}

.oppb-sidebar-presets h3, .oppb-sidebar-layouts h3, .oppb-sidebar-layers h3 {
  font-size: 16px;
}

/* Rotate icon when collapsed */
.oppb-sidebar-left--collapsed .oppb-sidebar-toggle__icon {
  transform: rotate(180deg);
}

.oppb-sidebar-toggle__icon {
  transition: transform var(--transition-fast);
}