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

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

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

      a
        +flex(space-between, flex-start)
        text-decoration: none
        color: $purple
        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: $purple

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

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