@mixin expandable-list($visible-elements: 4, $element-height: 18, $elements-padding: 6px){
  height: ($element-height + $elements-padding * 2) * $visible-elements;
  overflow: hidden;

  &-item {
    padding-top: $elements-padding;;
    padding-bottom: $elements-padding;
    font-size: #{$element-height - 2}px;
    line-height: #{$element-height}px;
  }

  &[aria-expanded=true] {
    height: 100%;

    ~ .more-link {
      display: none;
    }
  }

  &[aria-expanded=false] ~ .less-link {
    display: none;
  }

  ~ .more-link,
  ~ .less-link {
    text-decoration: underline;
    font-style: italic;
  }
}