1/* Collapsible */
 2@layer components {
 3  details {
 4    &::details-content {
 5      block-size: 0;
 6      @apply block opacity-0 transition-discrete transition-all;
 7    }
 8    &[open]::details-content {
 9      block-size: auto;
10      block-size: calc-size(auto, size);
11      @apply opacity-100;
12    }
13    summary {
14      @apply inline-flex items-center cursor-pointer;
15    }
16  }
17  details > summary::-webkit-details-marker {
18    display: none;
19  }
20}