.cmpt_group_openable {
  overflow: hidden;
  border-radius: 0.5em;
  background-color: white;
}
.cmpt_group_openable--blue {
  background-color: var(--pg-color-main-very-light);
}
.cmpt_group_openable--white {
  background-color: white;
  border: 1px solid color-mix(in hsl, var(--pg-color-main), transparent 75%);
  border-radius: 0.5em;
  box-shadow: inset 0 -2px 0 hsla(0, 0%, 0%, 0.125);
}
.cmpt_group_openable[data-openable-state-open] .cmpt_group_openable_header__btn_ico {
  transform: rotate(180deg);
}
.cmpt_group_openable[data-openable-state-open] .cmpt_group_openable_header--white {
  background-color: white;
}
.cmpt_group_openable__content {
  display: none;
  padding: 1em;
}

.cmpt_group_openable_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1em;
}
.cmpt_group_openable_header--blue {
  background-color: hsl(205, 58%, 93%);
}
.cmpt_group_openable_header--white {
  background-color: var(--pg-color-main-very-light);
  transition: background-color 0.5s ease;
}
.cmpt_group_openable_header__btn {
  background-color: hsl(205, 51%, 86%) !important;
  color: var(--pg-color-main) !important;
  display: flex;
  width: 2.5em;
  height: 2.5em;
  align-items: center;
  justify-content: center;
  flex-shrink: 1;
  box-shadow: none;
  padding: 0;
}
.cmpt_group_openable_header__btn_ico {
  transition: 0.5s ease-in-out;
}