.side-menu
  box-sizing: border-box

  .menu-label
    box-sizing: border-box
    padding: 5px 8px 0
    height: 38px
    position: relative
    overflow-x: hidden
    background: rgba(#fff, 0.1)
    line-height: 0
    margin-bottom: 1px

    label
      font-family: $condensed-font
      font-weight: 400
      color: #fff // $light-orange
      text-transform: uppercase
      font-size: 14px
      margin-right: 18px
      transition: color 0.15s ease-out
      display: inline-block

      +safari-only
        +non-retina
          font-weight: 600


    .line
      width: 100%
      opacity: 0.5

    .toggle-icon
      width: 12px
      margin-right: 8px
      position: relative
      top: 1px

    .type-icon
      opacity: 0.6
      width: 12px
      margin-right: 8px
      position: relative

  .menu-content
    padding-bottom: 12px

  &:last-of-type .menu-content
    padding-bottom: 28px

  .menu-list
    margin-bottom: 10px
    max-height: calc(100% - 53px)
    overflow-y: hidden
    overflow-x: hidden
    position: relative
    transform: translateZ(0)

    &:hover
      position: static
      overflow-y: auto
      overflow-x: hidden

      .menu-item
        width: calc(100% + 15px)

        img
          right: 18px + 15px

  .menu-item
    display: block
    position: relative
    box-sizing: border-box
    height: $sidebar-menu-item-height
    padding: 10px 12px
    text-decoration: none
    color: hsl(0, 0%, 89%)
    font-size: 11.5px
    font-weight: 300
    border-bottom: 1px solid hsl(0,0,30)
    transition: background 0.15s ease-out, color 0.15s ease-out

    +safari-only
      padding-top: 9px
      font-weight: 500

    img
      width: 6.5px
      position: absolute
      right: 18px
      top: 50%
      transform: translateY(-50%)
      opacity: 0
      transition: opacity 0.15s ease-out

    strong
      color: #fff
      font-weight: 400

    &.selected, &.selected:hover
      background: $darker-blue
      pointer-events: none
      font-weight: 400
      border-bottom: rgba(#000, 0.1)

      img
        opacity: 1

    &:hover
      background: rgba(#000, 0.15)
      img
        opacity: 0.8

  .menu-list > .menu-item:first-of-type
    border-top: 1px solid hsl(0,0,30)

  .menu-group .menu-item:last-of-type
    border-bottom: none

  .menu-group:last-of-type .menu-item:last-of-type
    border-bottom: 1px solid hsl(0,0,30)


  .group-label
    background: rgba(#000, 0.5)
    font-size: 10.5px
    text-transform: uppercase
    padding: 6px 0 7.5px 6px
    color: rgba(#fff, 0.9)
    font-weight: 500

  .new-btn
    border: 1px solid rgba(#000, 0.8)
    color: #fff
    background: none
    margin: 10px 9px
    width: calc(100% - 22px)
    box-shadow: 0px 0px 1px rgba(#fff, 0.2)
    outline-color: rgba(#fff, 0.1)
    z-index: 1
    position: relative
    height: $sidebar-menu-item-height
    font-size: 13.5px

    +safari-only
      +retina
        font-weight: 400
      +non-retina
        font-weight: 600


    img
      width: 17px

    &:hover
      background: rgba(#fff, 0.1)
      box-shadow: 0px 0px 2px rgba(#fff, 0.2)

    &.selected
      background: $darker-blue
      pointer-events: none

  &.apps
    .menu-label
      padding-top: 5px
      .type-icon
        top: 4px
        width: 11px
        margin-right: 10px

  &.users
    .menu-label
      padding-top: 6.5px
      .type-icon
        width: 13px
        top: 4px

  &.open
    .menu-label
      label
        color: $light-orange

      .toggle-icon
        transform: rotate(90deg)

.is-org-admin .side-menu
  .menu-label
    &, *
      cursor: pointer

    &:hover
      background: rgba(#fff, 0.2)
