.show-sub-menu
  color: $darkBlue

  >p
    font-size: 1rem
    line-height: 1.2
    margin: 0 0 1.5rem

  ul
    list-style: none
    padding: 0
    margin: 0

    li
      font-size: 0.9rem
      line-height: 1.2
      border-bottom: 1px solid rgba($blue, 0.35)

      a
        +flex(space-between, flex-start)
        text-decoration: none
        color: $darkBlue
        padding: 15px 0
        transition: all 0.3s

        p
          margin: 0
          width: calc(100% - 27px)

        .arrow
          position: relative
          right: 4px
          top: 1px
          display: inline-block
          width: 9px
          transform: translate3d(0,0,0)
          transition: transform 0.5s

          svg
            width: 100%
            max-height: 18px
            transform-origin: center
            transform: rotate(270deg)

            &.arrow-icon
              .st0
                fill: $darkBlue

        &:hover
          color: rgba($darkBlue, 0.5)

          .arrow
            transform: scale(1.4) translateX(6px)

      &.active
        a
          color: $blue


  // Overwrites for the overview page (has a different background color on the menu)
  .overview-page &
    color: white

    a
      color: white

      &:hover
        color: rgba(white, 0.5)

      .arrow
        svg
          &.arrow-icon
            .st0
              fill: white

    li
      border-bottom: 1px solid rgba(white, 0.5)

      &.active
        a
          color: $darkBlue