.categories-menu
  padding-top: 1px
  margin-bottom: 16px
  @media (min-width: $l)
    margin-bottom: 0

.categories-menu__section
  border-top: 1px solid #e5e5e5
  border-left: 1px solid #e5e5e5
  border-right: 1px solid #e5e5e5
  position: relative
  line-height: 1.5rem
  background-color: #f5f5f5
  &:last-of-type
    border-bottom: 1px solid #e5e5e5

  input[type="checkbox"]
    display: none
  label:after
    content: "-"
    display: block
    cursor: pointer
    font-size: 1.2rem
  input[type="checkbox"]:checked ~ label:after
    content: "+"
  input[type="checkbox"]:checked ~ .categories-menu__list
    display: none
  input[type="checkbox"]:hover ~ h2
    background-color: #e5e5e5

  h2
    font-weight: lighter
    margin: 0
    padding: 8px 8px 8px 16px
    text-transform: uppercase
    font-size: 1.1rem
    transition: 0.2s
    &:hover
      background-color: #e5e5e5

.categories-menu__expand
  position: absolute
  top: 8px
  right: 16px
  color: lighten($primary_text_color, 10%)

.categories-menu__list
  ul
    list-style: none
    padding: 0
    margin: 0
  li
    font-size: 0.85rem
    text-transform: uppercase
    a
      transition: 0.2s
      text-decoration: none
      color: $accent_color
      display: inline-block
      padding: 8px 8px 8px 24px
      width: 100%
      font-size: 0.8rem
      &:hover
        background-color: #e5e5e5
        cursor: pointer

  img
    width: 100%
    margin: 0
    display: block

  &--sub
    li
      font-size: 0.85rem
    a
      display: block
      padding: 8px 8px 8px 40px !important