.account-menu
  width: 100%
  height: 100%
  color: #fff
  box-sizing: border-box
  transition: border 0.15s ease-out//, height 0.15s ease-out
  overflow-y: hidden
  margin-bottom: 1px

  .basic-menu
    background: hsl(0,0,12)
    height: $sidebar-account-menu-height
    width: 100%
    font-family: $condensed-font
    font-size: 12.5px
    transition: background 0.15s ease-out

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

  .row-bottom, .row-top
    height: 50%
    width: 100%
    box-sizing: border-box

  .row-top
    border-bottom: 1px solid rgba(#fff, 0.1)
    transition: border 0.15s ease-out

  .col-left, .col-right
    display: inline-block
    box-sizing: border-box
    height: 100%
    font-size: 12.5px

  .col-left
    float: left
    background: rgba(#000, 0.98)
    width: 62%
    transition: border 0.15s ease-out, background 0.15s ease-out
    border-right: 1px solid rgba(#fff, 0.15)

  .col-right
    float: right
    width: 38%

  .toggle
    text-align: center
    transition: background 0.15s ease-out
    cursor: pointer

    > img
      width: 15px
      opacity: 0.65
      // transition: opacity 0.15s ease-out, transform 0.15s ease-out
      position: relative
      top: 4.5px

    &:hover
      background: rgba(#fff, 0.35)
      > img
        opacity: 1

  .col-left, .col-right
    label
      position: relative
      top: 6px

  .role
    text-align: center
    text-transform: uppercase
    font-size: 11px
    font-weight: 500
    opacity: 0.9
    +safari-only
      +non-retina
        opacity: 1
        font-size: 11.5px


    > label
      top: 7px

      +safari-only
        +non-retina
          top: 4.5px

  .org, .user
    padding-left: 8px

  .org
    color: $lighter-blue

  .menu-body
    height: 100%
    background: rgba(#000, 0.15)

    .spacer
      width: 100%
      height: 30px
      border-bottom: 1px solid rgba(#fff, 0.2)

    > a, .account-menu-back
      display: block
      background: rgba(#fff, 0.075)
      font-family: $default-font
      font-size: 11.5px
      font-weight: 300
      border-bottom: 1px solid rgba(#fff, 0.1)
      height: $sidebar-menu-item-height * 1.2
      box-sizing: border-box
      padding-left: 12px
      position: relative
      transition: background 0.15s ease-out
      cursor: pointer

      &[disabled]
        pointer-events: none
        opacity: 0.5

      +safari-only
        font-weight: 400

      > img
        width: 18px
        position: relative
        top: 50%
        transform: translateY(-50%)
        float: left

      > span
        margin-left: 14px
        position: relative
        top: 13px
        color: rgba(#fff, 0.9)
        transition: color 0.15s ease-out

        +safari-only
          top: 12px

      &, &:visited, &:hover
        color: #fff
        text-decoration: none

      &:hover
        background: rgba(#fff, 0.175)
        > span
          color: #fff

      &.selected, &.selected:hover
        background: $darker-blue
        border-bottom: none

      &.accept-invitation
        > span
          margin-left: 12px
        img
          width: 21px
          left: -1.5px

      &.my-account
        img
          top: 51%

      &.switch-account, &.switch-organization, &.sign-out
        > span
          margin-left: 16px
        img
          width: 17px

      &.account-menu-back
        span
          margin-left: 30px
        .img
          font-size: 18px
          float: left
          position: relative
          top: 17px
          line-height: 0



.account-menu-open .account-menu
  .toggle
    background: $light-blue
    > img
      opacity: 1


