Context {
  flex-shrink: 0
  flex-grow: 0
  overflow: hidden

  display: flex

  div.level {
    width: 13rem
    overflow-y: auto
    overflow-x: hidden

    border-right: 1px gainsboro solid

    div.Option {}

    header {
      $colorSubtle
      padding: .5rem 1rem
    }

    hr {
      border: 1px solid gainsboro
      border-bottom: none
      margin: 0
    }
  }
}

Option {
  min-width: 8rem
  padding: .5rem 1rem
  display: flex
  align-items: center

  :hover {
    cursor: pointer
    $backgroundSelected
  }

  -selected {
    $backgroundSelected
  }

  div.circle {
    width: 3.6rem
    position: relative

    div.alert {
      position: absolute
      width: 1.2rem
      height: 1.2rem
      border-radius: 1rem
      top: -.2rem
      left: -.2rem

      background-color: red
      color: #fff
      font-size: .8rem

      display: flex
      justify-content: center
      align-items: center
    }
    
    a img {
   
    }
    i {
      $avatarSmall
      $colorPrimary
      font-size: 1.3rem
      display: flex
      justify-content: center
      align-items: center
    }

  }

  div.label {
    $markdownSmall 

    flex-grow: 1

    display: flex
    align-items: center
    min-height: 3rem

    div.Button {
      flex-grow: 1
    }
  }
}