// .dropdown { // display: inline-block; // position: relative; // positioning must happen through parent container // } .dropdown__toggle { display: inline-block; cursor: pointer; } .dropdown__list-wrapper { display: none; position: absolute; } .dropdown__list { @extend %list-unstyled; margin-bottom: 0; } .dropdown__link { min-width: 100%; white-space: nowrap; } .dropdown__checkbox:focus + .dropdown__toggle { outline: none; color: $dropdown-link-hover-color; } .dropdown__checkbox:checked + .dropdown__toggle--expanded-text { display: inline; } .dropdown__checkbox:checked + .dropdown__toggle--collapsed-text { display: none; } .dropdown__checkbox:not(:checked) + .dropdown__toggle--expanded-text { display: none; } .dropdown__checkbox:not(:checked) + .dropdown__toggle--collapsed-text { display: inline; } .dropdown__checkbox:checked ~ .dropdown__list-wrapper { display: block; }