@media screen and (max-width: 30rem) {
  .c-clapss-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-clapss-details[open] {
    padding-bottom: var(--margin-lg);
  }

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

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

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

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

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

@media screen and (min-width: 30rem) {
  .c-clapss-details {
    padding      : 0;
    margin       : 0;
    background   : none;
    border       : 0;
    border-radius: 0;
  }

  .c-clapss-details:not([open])>*:not(.c-clapss-summary) {
    display: block;
  }

  .c-clapss-summary {
    display       : none;
    list-style    : none;
    cursor        : default;
    pointer-events: none;
    margin        : 0;
    padding       : 0;
  }

  .c-clapss-summary::-webkit-details-marker {
    display: none;
  }

  .c-clapss-toggle {
    display: none;
  }

  .c-clapss-details[open]>.c-clapss-summary {
    border: 0;
    margin: 0;
  }
}