frutjam/dist/components/accordion.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 */@layer properties;.accordion{--radius-accordion:calc(var(--border-radius)*2);--color-accordion-soft:var(--color-base-soft);--color-accordion-active:var(--color-base-active);display:block;width:100%;padding-inline:var(--accordion-flush--padding-inline,1rem);border-width:var(--accordion-flush--border-width,1px);border-style:solid;border-color:var(--color-accordion-soft);border-radius:var(--radius-accordion);&>details{box-sizing:border-box;position:relative;width:100%;&:not(:last-child){border-block-end-width:1px;border-block-end-style:solid;border-block-end-color:var(--color-accordion-soft)}text-wrap:pretty;&>summary::marker{content:none}&>summary{display:flex;gap:.5rem;align-items:center;justify-content:start;padding-block:1rem;padding-inline-end:1.5rem;font-weight:500;color:currentColor;cursor:pointer;&:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:2px}&:after{content:var(--tw-content);content:"";border-block-end:1px solid;border-inline-end:1px solid;width:.425rem;height:.425rem;position:absolute;inset-inline-end:.5rem;margin-block-start:.313rem;transform:translateY(-50%) rotate(45deg)}}}&>details[open]{&>summary{&:after{content:var(--tw-content);content:"";transform:rotate(225deg);transform-origin:center;transition:transform .3s}}}}.accordion-flush{--accordion-flush--border-width:0;--accordion-flush--padding-inline:0;&>details:first-child{>summary{padding-block-start:0}}&>details>summary{font-weight:400}}.accordion-content{padding-block-end:1rem;font-size:var(--text-base)}@property --tw-content{syntax:"*";initial-value:"";inherits:false}@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-content:""}}}