1
2// Accordion
3
4.header__actions-bar {
5  padding-top: 1em;
6  padding-bottom: 1em;
7  padding-right: 1em;
8  background: $darkblue;
9  color: $white;
10  margin-left: 0;
11  .event__actions {
12    margin-right: 10px;
13    margin-top: -6px;
14    @include mediaQuery(medium) {
15      margin-right: -40px;
16    }
17  }
18  p {margin-bottom: 0;}
19}
20
21.accord-trigger {
22  transform: rotate(90deg);
23  font-size: 1.5em;
24  color: lighten($darkgrey, 10%);
25  padding: .3em;
26  display: block;
27  margin: 0 auto;
28  transition: all .2s ease;
29  &:after {
30    content: '\276F'
31  }
32  &.active {
33    transform: rotate(-90deg);
34  }
35  &:focus {
36    outline: 0;
37    color: $darkbg__accent;
38  }
39}
40
41.accord-row {
42  overflow: hidden;
43  .accord-content.inactive {
44    max-height: 0;
45    height: 0;
46  }
47  .accord-content.active {
48    height: auto;
49    max-height: 1000px;
50    @include fastTransition-all;
51  }
52}