/* ==========================================================================
   Lists
   ========================================================================== */

/**
 * Services list
 */

ul.services-list

  padding: 0
  margin: -9px 0 0
  list-style: none

  /**
   * 1. make sure display is block to make clickable over the full width
   */
  a
    position: relative
    display: block /* 1 */
    color: $lightGrey
    text-decoration: none
    cursor: pointer

    /**
     * Arrow at the end of a list item
     */
    &:after
      position: absolute
      top: 10px
      right: 0

      width: 15px
      height: 15px

      content: ''
      +sprite(-59px -20px)

    &:hover
      color: $blue

      &:after
        +sprite(-59px 0)

  li.active
    a
      color: $black
      font-weight: semibold()

      &:after
        background-image: none

  +respond-to-width($xsGridBreakpoint)
    line-height: 2