@import "./../variable.scss";

.hx-header {
  z-index: 10;
  position: relative;
  height: $height-navbar;
  border-bottom: 1px solid $color-gray;
  padding: $pm-sm $pm-md;
  $height-content: $height-navbar - $pm-md;
  background-color: white;
  box-shadow: 0 0 24px rgba(0,0,0,.1);
  .title{
    display: inline-block;
    font-size: $font-bg;
    height: $height-content;
    line-height: $height-content;
    color: $color-heavy;
    margin-left: 0;
    vertical-align: top;
    strong {
      color: $color-main;
      font: {
        size: $font-bg;
        weight: 800;
      }
    }
    & + .title {
      margin-left: $pm-sm;
    }
  }
  .right, .left {
    display: inline-flex;
    height: 100%;
    align-items: center;
    width: auto;
    .hx-button, button {
      margin-right: $pm-sm;
    }
  }
  .right {  float: right; }
  .center {
    @include centerInParent;
  }
  .btn-back {
    background-color: transparent;
    color: $color-gray-deep;
    margin-right: $pm-md;
  }
  .btn-right {
  }
  .pad-search {
    width: 100%;
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    box-shadow: $shadow-bg;
    background-color: #fcfcfc;
    border-top: 1px solid $color-gray-light;
    &>div {
      padding: $pm-md;
    } 
    .hx-row {
      display: inline-block;
      width: 200px;
      padding: 0;
      &+.hx-row {
        margin-left: $pm-sm;
      }
      label {
        width: 100%;
        font-size: $font-sm;
        line-height: $height-navbar/2;
        height: $height-navbar/2;
        display: block;
        min-height: $height-navbar/2;
        padding-left: $pm-sm;
      }
      .content {
        width: 100%;
        display: block;
      }
    }
  }
}

@media screen and (min-width: 640px) {
  .hx-header {
    .btn-back {
      &:hover {
        color: $color-main;
      }
    }
  }
}

@media screen and (max-width: 640px) {
  $color-header-word: $color-white;  // 统一修改此处调整导航条文字或iconfont字体颜色
  .hx-header {
    box-shadow: none;
    .title {
      z-index: 10;
      display: inline-block;
      padding: 0;
      height: $height-normal;
      font: {
        weight: 500;
        size: 16px;
      }
      strong {
        color: $color-header-word;
        font: {
          weight: 600;
          size: $font-md + 3px;
        }
      }
    }
    small.title {
      display: none;
    }
    .btn-left,
    .btn-back,
    .btn-right {
      color: $color-header-word;
      height: $height-regular;
    }
    .btn-left, .btn-back {
      margin-left: $pm-bg;
    }
    .hx-search {
      z-index: 1001;
      float: right;
      background-color: red;
      button {
        color: $color-header-word;
      }
    }
    .center {
      z-index: 0;
      @include nowrap;
    }
    .right button {
      margin: 0 0 0 $pm-sm/2!important;
    }
  }
}