beta-parity-react/ui/Accordion/index.css

Beta Parity React Components

.accordion:not(.flush){border-color:var(--par-color-border-surface);border-radius:.375rem;border-width:1px}.accordion-item,.accordion.flush,.accordion:not(.flush){display:flex;flex-direction:column;width:100%}.accordion-item{border-bottom-width:1px;font-family:IBM Plex Sans,Helvetica Neue,Arial,sans-serif;font-size:1rem;font-weight:400;line-height:1.375rem}.accordion-item[aria-disabled=true],.accordion-item[aria-disabled=true] button:disabled{background-color:var(--par-color-bg-accordion-item-disabled);color:var(--par-color-text-accordion-item-disabled);cursor:not-allowed}.accordion:not(.flush)>.accordion-item{border-color:var(--par-color-border-surface);border-style:solid}.accordion:not(.flush)>.accordion-item:first-child{border-top-left-radius:.375rem;border-top-right-radius:.375rem}.accordion:not(.flush)>.accordion-item:last-child{border-bottom-left-radius:.375rem;border-bottom-right-radius:.375rem;border-style:none}.accordion.flush>.accordion-item:last-child{border-style:none}.accordion-item-trigger:focus-visible{outline-offset:-1px}.accordion-item-trigger{align-items:center;color:var(--par-color-text-accordion-item-enabled);display:flex;flex-shrink:0;height:3.5rem;justify-content:space-between;padding-left:1rem;padding-right:1rem;text-overflow:ellipsis}@media (hover:hover) and (pointer:fine){.accordion-item:not(.active):not([aria-disabled=true])>.accordion-item-trigger:hover{background-color:var(--par-color-bg-accordion-item-hovered);color:var(--par-color-text-accordion-item-hovered)}}.accordion-item:not(.active):not([aria-disabled=true])>.accordion-item-trigger:active{background-color:var(--par-color-bg-accordion-item-pressed);color:var(--par-color-text-accordion-item-pressed)}.accordion-item.active>.accordion-item-trigger{background-color:var(--par-color-bg-accordion-item-expanded);color:var(--par-color-text-accordion-item-expanded)}@media (hover:hover) and (pointer:fine){.accordion-item.active>.accordion-item-trigger:hover{background-color:var(--par-color-bg-accordion-item-hovered)}}.accordion-item.active>.accordion-item-trigger:active{background-color:var(--par-color-bg-accordion-item-pressed)}.accordion:not(.flush)>.accordion-item:first-of-type:not(.active)>.accordion-item-trigger{border-top-left-radius:.375rem;border-top-right-radius:.375rem}.accordion:not(.flush)>.accordion-item:last-of-type:not(.active)>.accordion-item-trigger,.accordion:not(.flush)>.accordion-item:last-of-type>.accordion-item-content{border-bottom-left-radius:.375rem;border-bottom-right-radius:.375rem}.accordion-item-trigger-icon{height:1rem;transition-duration:.3s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);width:1rem}.accordion-item.active>.accordion-item-trigger>.accordion-item-trigger-icon.chevron-trigger{transform:rotateX(180deg)}.accordion-item.active>.accordion-item-trigger>.accordion-item-trigger-icon.cross-trigger{--tw-rotate:0deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.accordion-item-trigger.icon-left>.accordion-item-trigger-text{padding-left:1rem}.accordion-item-trigger.icon-left>.accordion-item-trigger-text,.accordion-item-trigger.icon-right>.accordion-item-trigger-text{font-weight:600;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap;width:100%}.accordion-item-content{align-items:flex-start;color:var(--par-color-text-accordion-item-expanded);display:flex;flex-direction:column;flex-grow:0;font-family:IBM Plex Sans,Helvetica Neue,Arial,sans-serif;font-size:1rem;font-weight:400;gap:1rem;justify-content:space-between;line-height:1.375rem;overflow:hidden;padding-left:1rem;padding-right:1rem;transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.accordion-item.active .accordion-item-content{height:auto;max-height:100%;opacity:1;padding-bottom:1rem;padding-top:.5rem}.accordion-item:not(.active) .accordion-item-content{height:0;max-height:0;opacity:0;padding-bottom:0;padding-top:0}