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

.show-hide__toggle {

  position: relative;
  cursor: pointer;

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

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

.show-hide__toggle--right::before {
  left: auto;
  right: 20px;
  color: var(--color-font);
}

.show-hide--collapsed {

  .show-hide__toggle::before {
    transform: translateY(-50%) rotate(135deg);
  }

  :not(.show-hide__toggle) {
    display: block;
    height: 0;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow-y: hidden;
  }
}