// Collapsible JS component styling, made for the navigation tree. // These classes are added in table-of-contents.js. // They should not be applied without the JS.

.collapsible {

position: relative;

} .collapsible__body {

display: none;
.collapsible.is-open & {
  display: block
}

} .collapsible__heading, .toc__list > ul > li > a:link.collapsible__heading {

margin-right: 30px;

} .collapsible__toggle {

position: absolute;
top: 0;
right: -25px;
width: 50px;
height: 40px;
overflow: hidden;
text-indent: -999em;
border: 0;
background: 0;
color: inherit;
padding: 0;
&:focus {
  outline: 3px solid $focus-colour;
}

} .collapsible__toggle-icon {

position: absolute;
top: 0;
right: 30px;
&::after {
  content: '';
  display: block;
  border: 2px solid $black;
  border-width: 2px 2px 0 0;
  transform: rotate(135deg);
  width: 10px;
  height: 10px;
  margin-top: 10px;
}
.collapsible.is-open &::after {
  transform: rotate(315deg);
  margin-top: 18px;
}

}