*,
*:before,
*:after {
box-sizing: border-box;
}
/**
* Accordion container element
*/
.accordion {
list-style: none;
margin: 0;
padding: 0;
}
.accordion h2{margin: 0 0 5px;font-size: 1.65em;}
.accordion h2 button{font-size:inherit;font-weight:600;}
.accordion > li {
margin: 0;
}
/**
* Add zero-width space. needed to ensure Safari + VO respect list semantics.
* Set the before content to position absolute to negate any visible space
* the before content could add to the document.
*/
.accordion > li:before {
content: "\200B";
position: absolute;
}
/**
* Accordion Heading
*/
.accordion__heading {;
font-size: inherit;
margin: -1px 0 0;
}
.accordion__trigger {
-webkit-appearance: none;
background-color: transparent;
border: none;
border-radius: 0;
box-shadow: none;
cursor: pointer;
display: inline-block;
font-size: inherit;
margin: 0;
position: relative;
text-align: left;
z-index: 2;
}
.accordion__trigger:after {
border-left: .4em solid transparent;
border-right: .4em solid transparent;
border-top: .5em solid #5c5c5c;
bottom: 8px;
content: '';
height: 0;
position: absolute;
transition: transform .2s ease-in-out;
transform-origin: center center;
transform: rotate(0deg);
width: 0;
margin:auto 10px;
}
.accordion__trigger:hover:after,
.accordion__trigger:focus:after,
.accordion__trigger[aria-expanded="true"]:after {
}
.accordion__trigger[aria-expanded="true"]:after {
transform: rotate(180deg);
}
/**
* This is needed to allow a double tap iOS 11
* Safari + VO to function correctly, if there
* are multiple elements (wrapper spans) to layout
* text nodes within the accordion button.
-- This is not needed if a button only contains text
and no other child nodes wrapping the text --
.accordion__trigger > * {
pointer-events: none;
}
*/
.accordion__trigger:hover,
.accordion__trigger:focus {
color: #5c5c5c;
outline: none;
}
.accordion__trigger:focus {
box-shadow: inset 0 0 0 2px #1e82d1;
}
.accordion__trigger[aria-disabled="true"]:hover {
color: #fff;
cursor: not-allowed;
}
.accordion__trigger[aria-disabled="true"]:focus {
background-color: #0a2a42;
}
.accordion__panel {
background-color: inherit;
max-height: 0vh;
overflow: hidden;
padding: 0.001em 1.25em;
position: relative;
visibility: hidden;
z-index: 1;
}
.accordion__panel--transition {
transition:
max-height .2s ease-in-out,
padding-top .2s ease-in-out,
padding-bottom .2s ease-in-out;
}
.accordion__panel > :last-child {
margin-bottom: 0;
}
.accordion__panel[aria-hidden="false"] {
max-height: 100vh;
overflow: auto;
padding-bottom: 1.25em;
visibility: visible;
}
.accordion__trigger[aria-expanded="true"] {
}
