@am-header-height: 49px;

.am-header {
  position: relative;
  width: 100%;
  height: @am-header-height;
  line-height: @am-header-height;
  padding: 0 10px;

  h1 {
    margin-top: 0;
    margin-bottom: 0;
  }

  .am-header-title {
    margin: 0 30%;
    font-size: 2rem;
    font-weight: normal;
    text-align: center;
    .text-overflow();

    img {
      margin-top: 12px;
      height: 25px;
      vertical-align: top;
    }
  }

  .am-header-nav {
    position: absolute;
    top: 0;
    img {
      height: 16px;
      width: auto;
      vertical-align: middle;
    }
  }

  .am-header-left {
    left: 10px;
  }

  .am-header-right {
    right: 10px;
  }

  .hook-am-header;
}

.am-header-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: @z-index-header-fixed;
  .hook-am-header-fixed;
}

.am-with-fixed-header {
  padding-top: @am-header-height;
}

.hook-am-header() {}
.hook-am-header-fixed() {}