@import "../elements/tag_list.styl"
@import "./avatar_badge.styl"
@import "./main_logo.styl"
@import "./inline_header_menu.styl"

.common-header
  display: flex
  height: 50px
  align-items: center
  background: #f8f8f8
  border-bottom: 1px solid #ddd
  padding: 0 32px
  position: relative

  .main-logo-container
    height: 50px

    &:hover .app-menu
      margin-top: 50px

  .org-filter
    margin: 0 16px 0 28px

  .spacer
    flex: 1
    height: 1px

  & > .avatar-badge
    margin-left: 32px

  & > .search-box
    margin-left: 32px

    form
      width: 240px
      padding: 0
      margin: 0
      position: relative

    button
      width: 40px
      background: transparent url("/res/common/search.svg") 50% 50%/14px no-repeat
      border: none
      padding: 0
      position: absolute
      right: 0
      top: 0
      bottom: 0
      cursor: pointer
      box-sizing: border-box

      span
        display: inline-block
        font-size: 24px
        color: #999
        transform: rotate(45deg)
        visibility: hidden

    input
      width: 100%
      border: 1px solid #d3d3d3
      border-radius: 2px
      padding: 6px 40px 6px 13px
      box-sizing: border-box

      &:focus
        border: 2px solid #fc0
        padding: 5px 31px 5px 12px
