.show-sub-menu
  padding: 80px 0
  >p
    font-size: 1rem
    line-height: 1.2
    color: $darkgrey
    font-weight: semibold()
    margin: 0 0 1rem

    .overview-page &
      color: $light

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

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

      a
        +flex(space-between, flex-start)
        text-decoration: none
        color: $darkgrey
        padding: 15px 0
        transition: color 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: $darkgrey

        &:hover
          color: $dark
          .arrow
            transform: translate3d(8px,0,0)

      &.active
        a
          color: $dark
          font-weight: semibold()


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

    a
      color: $light

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

      .arrow
        svg
          &.arrow-icon
            .st0
              fill: $light

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

      &.active
        a
          color: $yellow