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

.headerBar
  display: flex
  flex-direction: row
  background-color: transparent
  flex-shrink: 0
  margin: 0
  height: 0

  &.hasHeaderText
    height: auto
    min-height: 20px
    // border-bottom: 1px solid $ui-line-grey
    padding-top: 15px
    padding-left: 8px
    margin-left: 15px
    // margin-bottom: 15px

  .headerText
    // line-height: 26px
    // color: $black
    // font-size: 18px
    width: 100%
    display: flex

  .subheaderText
    line-height: 18px
    font-size: 16px
    margin-top: 6px
    margin-left: 2px
    color: #6A6A6A

  .headerRightActions
    display: flex
    flex-direction: row-reverse
    flex-grow: 1
    position: relative
    z-index: 10

    .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: absolute
      bottom: 5px
      right: 10px
      cursor: pointer
      z-index: 10000
      color: $ui-line-grey
      &:hover
        color: $primary-accent

    > div
      margin-left: 10px

  .pageRightActions
    display: flex
    flex-direction: row-reverse
    flex-grow: 1
    position: absolute
    top: 10px
    right: 10px

    > div > div, > div > button
      margin-left: 10px

  &.hasSidebar
    .pageRightActions
      right: 295px

@media screen and (max-width: $break-large)
  .headerBar.hasSidebar
    .pageRightActions
      right: calc(100% - #{$left-sidebar-width} - #{$center-pane-width})