// Accordion .header__actions-bar { padding-top: 1em; padding-bottom: 1em; padding-right: 1em; background: $darkpurple; color: $white; margin-left: 0; .event__actions { margin-right: 10px; margin-top: -6px; @include mediaQuery(large) { margin-right: -20px; } } p {margin-bottom: 0;} } .accord-trigger { transform: rotate(90deg); font-size: 1.5em; color: lighten($darkgrey, 10%); padding: .3em; display: block; margin: 0 auto; transition: all .2s ease; &:after { content: '\276F' } &.active { transform: rotate(-90deg); } &:focus { outline: 0; color: $darkbg__accent; } } .accord-row { overflow: hidden; .accord-content.inactive { max-height: 0; height: 0; } .accord-content.active { height: auto; max-height: 1000px; @include fastTransition-all; } }