astral-accordion {
  display: flex;
  flex-direction: column;
}
astral-accordion[color=primary] .panel.opened .header {
  background-color: rgba(var(--astral-primary-color));
  color: rgba(var(--astral-primary-contrast-color));
}
astral-accordion[color=primary] .panel.stroked .header {
  border: 1px solid rgba(var(--astral-primary-color));
}
astral-accordion[color=primary] .panel .header:hover {
  background: rgba(var(--astral-primary-color));
  color: rgba(var(--astral-primary-contrast-color));
}
astral-accordion[color=secondary] .panel.opened .header {
  background-color: rgba(var(--astral-secondary-color));
  color: rgba(var(--astral-secondary-contrast-color));
}
astral-accordion[color=secondary] .panel.stroked .header {
  border: 1px solid rgba(var(--astral-secondary-color));
}
astral-accordion[color=secondary] .panel .header:hover {
  background: rgba(var(--astral-secondary-color));
}
astral-accordion[color=success] .panel.opened .header {
  background-color: rgba(var(--astral-success-color));
  color: rgba(var(--astral-success-contrast-color));
}
astral-accordion[color=success] .panel.stroked .header {
  border: 1px solid rgba(var(--astral-success-color));
}
astral-accordion[color=success] .panel .header:hover {
  background: rgba(var(--astral-success-color));
}
astral-accordion[color=warning] .panel.opened .header {
  background-color: rgba(var(--astral-warning-color));
  color: rgba(var(--astral-warning-contrast-color));
}
astral-accordion[color=warning] .panel.stroked .header {
  border: 1px solid rgba(var(--astral-warning-color));
}
astral-accordion[color=warning] .panel .header:hover {
  background: rgba(var(--astral-warning-color));
}