@mixin background-color($name, $color)
  .#{$name}
    &:hover
      background-color: lighten($color, 10%)
    &.active
      background-color: $color

.nav
  font-family: helvetica
  &.nav-list

    li
      position: relative

      &.active
        &.yellow .pointer
          border-left-color: $yellow
        &.blue .pointer
          border-left-color: $blue
        &.purple .pointer
          border-left-color: $purple
        &.purple .pointer
          border-left-color: $purple
        &.green .pointer
          border-left-color: $green
        &.orange .pointer
          border-left-color: $orange
        &.red .pointer
          border-left-color: $red

        .pointer
          position: absolute
          right: -1.25em
          top: 0
          width: 0
          height: 0
          border-top: 1.45em solid transparent
          border-bottom: 1.45em solid transparent
          border-left-width: 1.45em
          border-left-style: solid




    +background-color("yellow", $yellow)
    +background-color("blue", $blue)
    +background-color("purple", $purple)
    +background-color("green", $green)
    +background-color("orange", $orange)
    +background-color("red", $red)

    a
      color: #222
      display: block
      font-size: 1.5em
      line-height: 1.2
      padding: 0.33em 1em

      &:hover
        text-decoration: none
