@react-beauty/ui-accordion/dist/index.css

ui-accordion

.react-beauty-el-icon[data-size="2xs"]{width:var(--components-icon-size-placeholder-2xs);height:var(--components-icon-size-placeholder-2xs)}.react-beauty-el-icon[data-size=xs]{width:var(--components-icon-size-placeholder-xs);height:var(--components-icon-size-placeholder-xs)}.react-beauty-el-icon[data-size=md]{width:var(--components-icon-size-placeholder-md);height:var(--components-icon-size-placeholder-md)}.react-beauty-el-icon[data-size=lg]{width:var(--components-icon-size-placeholder-lg);height:var(--components-icon-size-placeholder-lg)}.react-beauty-el-accordion-container{background-color:var(--components-accordion-colors-default-bg);border-radius:var(--components-accordion-border-radius);width:100%;box-shadow:var(--components-accordion-shadow-default);-webkit-transition:box-shadow var(--components-accordion-transition-duration) var(--components-accordion-transition-timing);transition:box-shadow var(--components-accordion-transition-duration) var(--components-accordion-transition-timing)}.react-beauty-el-accordion-container[data-expanded=true]{box-shadow:var(--components-accordion-shadow-expanded)}.react-beauty-el-accordion-header{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;background-color:var(--components-accordion-colors-default-bg);color:var(--components-accordion-colors-default-color);gap:var(--components-accordion-header-gap);padding:var(--components-accordion-padding-t) var(--components-accordion-padding-r) var(--components-accordion-padding-b) var(--components-accordion-padding-l);-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;border-radius:var(--components-accordion-border-radius);cursor:pointer;-webkit-transition:background-color var(--components-accordion-transition-duration) var(--components-accordion-transition-timing);transition:background-color var(--components-accordion-transition-duration) var(--components-accordion-transition-timing)}.react-beauty-el-accordion-header:hover{background-color:color-mix(in srgb,var(--components-accordion-colors-default-bg),var(--components-accordion-colors-default-color) 5%)}.react-beauty-el-accordion-header:focus-visible{outline:solid;outline-width:4px;outline-color:var(--components-accordion-colors-focus-outline)}.react-beauty-el-accordion-title{font-size:var(--components-accordion-font-size);line-height:var(--components-accordion-line-height);font-weight:var(--components-accordion-font-weight-title)}.react-beauty-el-accordion-content{overflow:hidden;height:auto;-webkit-transition:max-height var(--components-accordion-transition-content),opacity var(--components-accordion-transition-content),padding var(--components-accordion-transition-content);transition:max-height var(--components-accordion-transition-content),opacity var(--components-accordion-transition-content),padding var(--components-accordion-transition-content);background-color:var(--components-accordion-colors-content-bg);border-bottom-left-radius:var(--components-accordion-border-radius);border-bottom-right-radius:var(--components-accordion-border-radius);max-height:0;color:var(--components-accordion-colors-default-color);transform-origin:top}.react-beauty-el-accordion-content[data-expanded=true]{visibility:visible;opacity:1;max-height:1000px;padding:var(--components-accordion-content-padding)}.react-beauty-el-accordion-content[data-expanded=false]{opacity:0;max-height:0;padding:0 var(--components-accordion-padding-l);visibility:hidden}.react-beauty-el-accordion-lead-element{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.react-beauty-el-accordion-trail-element{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-left:auto;-webkit-transition:-webkit-transform var(--components-accordion-transition-duration) ease;transition:transform var(--components-accordion-transition-duration) ease}.react-beauty-el-accordion-trail-element[data-expanded=true]{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}