/* Style for the collapsible button */
.collapsible {
  background-color: var(--color-bg-tertiary);
  color: var(--color-text-primary);
  cursor: pointer;
  padding: 15px;
  width: 100%;
  border: 1px solid var(--color-border-primary);
  text-align: left;
  outline: none;
  font-size: 16px;
  margin-bottom: 2px;
  border-radius: 0.5rem;
  transition: all var(--transition-duration) var(--transition-timing);
  box-shadow: var(--shadow-sm);
}

/* Hover state */
.collapsible:hover {
  background-color: var(--color-bg-secondary);
  box-shadow: var(--shadow-md);
}

/* Active state */
.collapsible.active {
  background-color: var(--color-bg-accent);
  color: var(--color-text-on-accent);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-color: var(--color-bg-accent);
}

/* Style the collapsible content. By default it's hidden */
.content {
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out, padding 0.3s ease-out;
  background-color: var(--color-bg-secondary);
  border-left: 1px solid var(--color-border-primary);
  border-right: 1px solid var(--color-border-primary);
  border-bottom: 1px solid var(--color-border-primary);
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

/* Style the content when it's visible */
.content.active {
  padding: 15px;
  border-top: 1px solid var(--color-border-secondary);
  min-height: 2em;
  box-shadow: var(--shadow-sm);
}