.c-claps-details {
  padding         : 0 var(--margin-md);
  margin          : var(--margin-lg) 0 0 0;
  background-color: var(--main-bg);
  border          : var(--border-thin) solid var(--back-strong);
  border-radius   : var(--rounding);
}

.c-claps-details[open] {
  padding-bottom: var(--margin-lg);
}

.c-claps-summary {
  display        : flex;
  align-items    : center;
  padding        : var(--margin-md);
  margin         : 0 var(--n-margin-md);
  list-style-type: none;
  cursor         : pointer;
}

@media screen and (min-width: 30rem) {
  .c-claps-summary {
    padding: var(--margin-lg) var(--margin-md);
  }
}

.c-claps-details[open]>.c-claps-summary {
  border-bottom: var(--border-thin) solid var(--back-strong);
  margin-bottom: var(--margin-lg);
}

.c-claps-label {
  flex-grow: 1;
}

.c-claps-details .c-claps-toggle {
  flex-grow  : 0;
  flex-shrink: 0;
  fill       : transparent;
  stroke     : var(--main-fg);
}

.c-claps-details[open] .c-claps-toggle {
  stroke: transparent;
  fill  : var(--main-fg);
}