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

@import '~react-select/scss/default'

html, body, main
  height: 100%
  min-height: 100%

main
  display: flex
  flex-direction: column
  flex-grow:

body
  margin: 0
  -webkit-font-smoothing: antialiased
  background-color: rgba(0, 0, 0, 0.85)

*
  box-sizing: border-box


.appContainer, .projectContainer
  +maxHeight100NoOverflow

.projectContainer
  flex-direction: row

.projectRightContainer
  +fillContainer
  max-width: calc(100% - #{$left-sidebar-width})
  background-color: $center-grey
  flex-direction: column

.projectSelectorAction
  border: none
  color: $white

.secondaryNav, .secondaryNavToggle
  background-color: $black
  color: $white

.secondaryNav
  .secondaryNavItem
    cursor: pointer
    border-bottom: 1px solid rgba($ui-line-grey, 0.5)
    padding: 0 5px

    height: 30px
    line-height: 30px
    font-size: 12px
    font-weight: 400
    padding-left: 10px
    color: $white

    &:hover
      background-color: $primary-accent-hover
      color: $white

.feedbackButton
  position: absolute
  bottom: 0
  right: 0
  z-index: 20
  width: 150px
  background-color: $orange
  display: flex
  flex-direction: row
  flex-grow: 1
  align-items: center
  height: 30px
  cursor: pointer
  padding: 8px 15px
  color: $white

  &:hover
    background-color: $light-orange

  .smile
    margin-left: auto
    margin-top: -2px
    font-size: 18px

.secondaryNavToggle
  +smallCaps
  display: flex
  flex-direction: row
  flex-grow: 1
  align-items: center
  height: 30px
  cursor: pointer
  padding: 8px 15px
  color: $white

  &:hover
    background-color: $primary-accent-hover

  img.picture
    border-radius: 30px
    width: 30px
    height: 30px
    overflow: hidden

  .chevron
    margin-left: auto
    margin-top: -12px
    font-size: 16px

  &.secondaryNavOpen
    .chevron
      height: 0
      margin-top: -15px


.projectSidebar
  display: flex
  flex-direction: column
  position: relative
  min-width: $left-sidebar-width
  max-width: $left-sidebar-width
  background: $left-sidebar-grey //  $black

  .top
    .logoContainer
      height: $navbar-top-logo-height
      min-height: $navbar-top-logo-height
      display: flex
      padding-top: 5px
      cursor: pointer

      .logo
        width: 22px
        height: 24px
        margin-left: 6px
        margin-top: 9px

      .logoText
        font-size: 26px
        font-weight: 800
        margin-top: 4px
        margin-left: 11px
        color: $white
        
    .projectTitle
      margin-left: 5px
      margin-right: 10px
      word-wrap: break-word
      color: $white

  .bottom
    margin-top: auto
    display: flex
    align-items: center
    justify-content: center
    height: 55px
    color: white
    cursor: pointer

    .anonymousUserBottom
      text-align: center
      padding-bottom: 10px

      .temporary
        +smallCaps
        // color: $orange
        padding-bottom: 5px
        color: white
        cursor: default

      .register
        color: white

    .username
      padding-right: 10px

    .userOptions
      display: flex
      align-items: center
      // background-color: rgba(255, 255, 255, 0.1)
      padding-left: 15px

      img.picture
        border-radius: 30px
        width: 30px
        height: 30px
        overflow: hidden

      .logoutUser
        padding: 12px 24px 12px 12px
        line-height: 24px
        color: $white

      .userStatus, .logoutUser
        font-size: 12px
        font-weight: 400
        color: $white

        &:hover
          cursor: pointer

        .username
          font-weight: 600

.projectTopBar
  display: flex
  flex-direction: row
  min-height: $top-bar-height
  max-height: $top-bar-height
  min-width: 800px
  flex-shrink: 0
  background-color: $center-grey
  border-bottom: 1px solid $ui-line-grey
  margin: 0 15px

  .projectTopBarLeft
    +titleText
    color: $black

    display: flex
    flex-direction: row
    align-items: center
    height: $top-bar-height
    line-height: 48px
    padding-left: 8px

    .section
      display: flex
      flex-direction: row
      align-items: center

      .item
        display: flex
        flex-direction: column
        .label
          +smallCapsBold
          line-height: 20px
          margin-top: 10px
          max-height: 0px
          padding-bottom: 3px
          margin-top: 11px

          .selectorChevron
            margin-left: 0px

        .value
          color: $left-sidebar-grey
          font-size: 16px

          &.multiple
            +linkStyle(16px)

          &.projectPage
            text-transform: capitalize

      span.separator
        padding-left: 10px
        padding-right: 20px
        position: relative
        top: 1px
        left: 7px

      .projectSelector, .datasetSelector  // Dropdowns
        height: $top-bar-height
        min-width: 50px
        background-color: transparent
        font-weight: 500

        .dropDownLabel
          line-height: 0px
          margin-top: 10px
          max-height: 0px
          padding-bottom: 2px
          margin-top: 9px
          position: relative
          top: 10px

        &:hover
          > div > div:first-of-type > div:first-child
            color: $primary-accent
            text-decoration: underline

        > div > div:first-of-type  // .Select-control
          height: $top-bar-height
          border: none
          line-height: 0px
          background-color: transparent

          > div:first-child  // .Select-value
            display: inline-block
            height: $top-bar-height
            position: relative
            white-space: normal
            padding-left: 0px
            padding-right: 0px

            > span  // .Select-value-label
              display: block
              height: $top-bar-height
              > div  // .valueContainer
                > span
                  color: $primary-accent

          > div:nth-child(2)  // .Select-input
            position: absolute
            top: 0
            height: 0
            width: 0

          > span  // .Select-arrow-zone
            display: none

          span.projectSelectorValue, span.datasetSelectorValue
            +titleText
            height: $top-bar-height
            line-height: 50px
            font-weight: 500

        // Dropdown values
        > div > div:nth-of-type(2)  // .Select-menu-outer
          margin-top: -10px
          margin-left: -10px
          > div // Select-menu
            display: inline-block
            font-size: 16px
            line-height: 20px
            padding-right: 5px
            // display: inline-block
            // position: relative
            // white-space: normal
            // padding-left: 0px
            // padding-right: 10px

            > div  // .Select-option
              // display: block
              // height: 20px

.projectCreateModal, .feedbackModal
  .controlSection
    .label
      +smallCapsBold
      padding-top: 10px

    &:first-of-type
      .label
        padding-top: 0px

  .registerLink, .loginLink
    +linkStyle(14px)

.receivedFeedbackContainer
  text-align: center
  span
    cursor: pointer
    color: $primary-accent
    border: 3px solid $primary-accent
    padding: 20px
    border-radius: 80px
    font-size: 55px
