$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)

  @media (max-width: 768px)
    left: auto
    right: 20px
    color: var(--color-font)

.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