/* clients/static/css/collapsibles.css */

.collapsible {
  width: 100%;
}

/* header row */
.collapsible__header{
  display:flex;
  align-items:center;
  gap:12px;
  cursor:pointer;
  user-select:none;
}

/* left grey circle arrow */
.collapsible__arrow{
  width:28px;
  height:28px;
  min-width:28px;
  border-radius:50%;
  background:#e6e6e6;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  transition:transform .18s ease, background .18s ease;
}

.collapsible__arrow::before{
  content:"›";
  display:block;
  transform:rotate(0deg);
  transition:transform .18s ease;
}

.collapsible.is-open .collapsible__arrow::before{
  transform:rotate(90deg);
}

.collapsible__header:hover .collapsible__arrow{
  background:#dcdcdc;
}

.collapsible__title{
  margin:0;
}

.collapsible__body{
  margin-top:12px;
}