@import '../../../css/mixins.sass'

.sidebar
  // position: absolute
  // top: 0px
  // right: 0px
  flex-direction: column
  flex-shrink: 0
  // background-color: $right-sidebar-grey  // white
  background-color: $right-sidebar-grey  // center-grey

  overflow-y: auto

  padding: 15px
  padding-top: 20px
  width: $right-sidebar-width
  z-index: 10

  .sidebarGroup
    display: flex
    flex-direction: column

    &:last-child
      .sidebarGroupContent
        padding-bottom: 0px

    &.collapsed
      .collapseArrow
        -webkit-transform: rotate(90deg)
        -moz-transform: rotate(90deg)
        -ms-transform: rotate(90deg)
        -o-transform: rotate(90deg)
        transform: rotate(90deg)

      .sidebarGroupContent
        // display: none
        padding: 0
        max-height: 0
        overflow: hidden
        font-weight: 12px

    .sidebarGroupHeading
      display: flex
      flex-direction: row
      cursor: pointer
      padding-bottom: 4px
      align-items: flex-start

      .headingName
        +smallCapsBold
        line-height: 18px

      .pullRight
        margin-left: auto

        > span
          &:first-child
            margin-left: 0px
          margin-left: 5px

        .helperText
          +regularText
          position: absolute
          top: 20px
          right: 20px
          z-index: 1000
          background-color: $center-grey
          border: 1px solid $ui-line-grey
          width: 300px
          padding: 12px 20px
          display: table

        .helperButton
          position: relative
          top: -2px
          margin-left: 6px
          cursor: pointer
          z-index: 10000
          color: $ui-line-grey
          &:hover
            color: $primary-accent

        .rightAction
          font-weight: normal
          color: $primary-accent

        .collapseArrow
          cursor: pointer
          margin-top: 6px
          border-color: #999 transparent transparent
          border-style: solid
          border-width: 5px 5px 2.5px
          display: inline-block
          height: 0
          width: 0

    .sidebarGroupContent
      padding-bottom: 20px

    .stacked
      display: flex

  .sidebarCategoryGroup
    &.collapsed
      .sidebarCategoryGroupHeading
        padding-bottom: 8px

    &:last-child
      border-bottom: 1px solid rgba($small-caps-grey, 0.2)
      &.collapsed
        border-bottom: none
        .sidebarCategoryGroupHeading
          border-top: 1px solid rgba($small-caps-grey, 0.2)

    .sidebarCategoryGroupHeading
      font-weight: bold
      margin: 0 -15px
      padding: 8px 10px
      padding-bottom: 0px
      padding-right: 0px
      margin-right: 0px
      border-top: 1px solid rgba($small-caps-grey, 0.2)

      .icon
        padding-right: 3px


    .sidebarCategoryGroupContent
      padding: 20px 0
