@import variables
@import mixins

header
  display: flex
  flex-wrap: wrap
  padding: 5px 10px
  margin-bottom: 5px
  border-bottom: 1px solid #dedede
  background-color: #fbfbfb

  .title-container
    flex: 1
    min-width: 300px
    @include xs-device
      order: 3

  .board-selector-container
    min-width: 320px
    display: flex
    align-items: center
    @include xs-device
      order: 2
      min-width: 300px
      input[type=text]
        max-width: 280px

  .menus-container
    min-width: 120px
    display: flex
    align-items: center
    justify-content: flex-end
    @include xs-device
      order: 1
      margin-bottom: 5px
      margin-left: auto

  h1
    font-size: size('title')
    .tooltip
      opacity: 0.3
      font-size: size('tiny')

a i.web-notification-icon
  color: link-color('primary')
  &:focus, &:hover
    color: color('dark')