/* colorPanelStyles.css */

/* Color Panel Wrapper */
#colorControlsGroup {
  width: 100%;
}

.toggle-icon {
  font-size: var(--fs-2xl);
  margin-left: 5px;
}

/* Collapsible Content */
.collapsible-content {
  display: none;
}

.collapsible-content.open {
  display: block;
}

/* Menu Blocks */
.menu_block {
  width: 100%;
  margin-bottom: var(--sp-5);
  text-align: center;
}

.menu_block label {
  display: block;
  text-align: center;
  margin-bottom: 5px;
  width: 100%;
}

.menu_block select {
  width: 100%;
  max-width: 120px;
  margin: 0 auto;
}

/* Colorbar */
.colorbar-container {
  width: 120px;
  height: 40px;
  border-radius: var(--radius-3);
  overflow: hidden;
  margin: 0 auto;
}

.colorbar-container canvas {
  width: 100%;
  height: 100%;
}

/* Labels */
.colorbar-labels {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 3px;
}

.colorbar-labels div {
  font-size: var(--fs-base);
  color: var(--fg-85);
}