.expansion-panel { border: 1px solid var(--color-border); border-radius: var(--border-radius-md); transition: box-shadow var(--transition-speed); } .expansion-panel.is-open { box-shadow: var(--box-shadow-sm); } .expansion-panel-header { background: none; border: none; font: inherit; color: inherit; text-align: left; display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0.75rem 1.25rem; font-size: 1rem; font-weight: 500; cursor: pointer; } .expansion-panel-icon { transition: transform 0.3s ease-out; } .expansion-panel.is-open .expansion-panel-icon { transform: rotate(180deg); } .expansion-panel-content-wrapper { max-height: 0; overflow: hidden; transition: max-height 0.35s ease-in-out; } .expansion-panel.is-open .expansion-panel-content-wrapper { max-height: 200px; } .expansion-panel-content { padding: 0 1.25rem 1.25rem 1.25rem; }