frutjam/dist/components/collapsible.css

A utility-first CSS UI Library for Tailwind CSS

/*! frutjam v2.2.1 (c) 2026 Nezanuha | Released under the MIT License | https://frutjam.com */
/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */.collapsible-overlay{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding-block-end:1.25rem;cursor:pointer;.collapsible-open>&,.collapsible:has(>.collapsible-toggle:checked) &{display:none}}.collapsible-toggle{position:absolute;opacity:0;width:0;height:0}.collapsible{position:relative;&.collapsible-open,&:has(>.collapsible-toggle:checked),&[open]{&>.collapsible-content{grid-template-rows:1fr}}}.collapsible-group{position:relative}.collapsible-arrow{&:after{content:"";display:inline-block;flex-shrink:0;width:.4em;height:.4em;border-inline-end:1.5px solid currentColor;border-block-end:1.5px solid currentColor;transform:rotate(45deg);transition:transform .3s ease;margin-inline-start:auto}.collapsible-open>&:after,.collapsible:has(>.collapsible-toggle:checked) &:after,.collapsible[open]>&:after{transform:rotate(225deg)}}.collapsible-content{display:grid;grid-template-rows:0fr;overflow:hidden;border-start-start-radius:inherit;border-start-end-radius:inherit;border-end-start-radius:inherit;border-end-end-radius:inherit;transition:grid-template-rows .3s ease;&>*{min-height:0}}.collapsible-title{background:none;border:none;font:inherit;display:flex;align-items:center;width:100%;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;list-style:none;&::marker{content:none}&::-webkit-details-marker{display:none}}.is-collapsible-close{display:inline;.collapsible-group:has(.collapsible-open) &,.collapsible-group:has(.collapsible>.collapsible-toggle:checked) &,.collapsible-group:has(.collapsible[open]) &,:is(.collapsible-open,.collapsible:has(>.collapsible-toggle:checked),.collapsible[open]) &{display:none}}.is-collapsible-open{display:none;.collapsible-group:has(.collapsible-open) &,.collapsible-group:has(.collapsible>.collapsible-toggle:checked) &,.collapsible-group:has(.collapsible[open]) &,:is(.collapsible-open,.collapsible:has(>.collapsible-toggle:checked),.collapsible[open]) &{display:inline}}.collapsible-peek{&>.collapsible-content{grid-template-rows:1fr;max-height:var(--peek-height,8rem);mask-image:linear-gradient(180deg,#000 40%,transparent);-webkit-mask-image:linear-gradient(180deg,#000 40%,transparent)}&.collapsible-open,&:has(>.collapsible-toggle:checked){&>.collapsible-content{max-height:var(--peek-max-height,99rem);mask-image:none;-webkit-mask-image:none}}}