$show-hide-toggle-size: 6px;

.js-show-hide__toggle {

  position: relative;
  cursor: pointer;
  padding: 3px 7px;

  &:hover {
    background-color: var(--color-grey-lighter);
    cursor: pointer;
  }
}

.js-show-hide__toggle::before {
  content: '';
  position: absolute;
  width: $show-hide-toggle-size;
  height: $show-hide-toggle-size;
  left: -15px;
  top: 12px - $show-hide-toggle-size / 2;
  color: var(--color-primary);
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transition: transform .2s ease;
  transform-origin: ($show-hide-toggle-size / 2);
  transform: translateY($show-hide-toggle-size) rotate(-45deg);
}

.js-show-hide__target {
  transition: all .2s ease;
}

.js-show-hide--collapsed {

  .js-show-hide__toggle::before {
    transform: translateY($show-hide-toggle-size / 3) rotate(135deg);
  }

  .js-show-hide__target {
    display: block;
    height: 0;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow-y: hidden;
  }
}