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

  display: flex

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

    border-right: 1px gainsboro solid

    section {
      header {
        $colorFontSubtle
        padding: .5rem 1rem
      }

      div.Option {}

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

    -one {}
    -two {
      section {
        div.Option {
          padding: 0 1rem
        }
      }
    }
  }
}

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 {
      $circleSmall
      $colorPrimary
      font-size: 1.3rem
      display: flex
      justify-content: center
      align-items: center
    }
  }

  div.label {
    $markdownSmall 
    (a) {
      $colorFontBasic
      :hover { text-decoration: none }
    }

    flex-grow: 1

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

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