$pretty-header-height: 50px;

#{$prefix}header {
  padding-right: 0;
  display: flex;
  flex-shrink: 0;
  height: $pretty-header-height;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);

  &-left {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;

    /*logo*/
    #{$prefix}logo {
      &-box {
        padding-right: 5px;
        @include vertical-center($pretty-header-height);
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.26), 0 -1px 0 rgba(0, 0, 0, 0.02);
        z-index: 1;
        float: left;
      }

      &-img {
        float: left;
        margin: 5px 11px;
        width: $pretty-header-height - 10;
        height: $pretty-header-height - 10;
      }

      &-text {
        float: left;
        @include vertical-center($pretty-header-height);
        font-size: 20px;
        white-space: nowrap;
      }
    }

    /*侧边栏隐藏切换按钮*/
    #{$prefix}sidebar-toggle-btn {
      position: relative;
      float: left;
      @include vertical-center(50px);
      width: 50px;
      font-size: 25px;
      color: #fff;
      text-align: center;
      cursor: pointer;

      @include toolbar-hover-border();
    }

    #{$prefix}breadcrumb {
      float: left;
      @include vertical-center(50px);
    }
  }

  &-right {
    display: flex;
    flex-grow: 1;
    @include vertical-center(50px);
    justify-content: flex-end;
  }

  &-userinfo {
    margin: 0 10px 0 5px;
    position: relative;
    cursor: pointer;
    @include toolbar-hover-border();

    .el-dropdown {
      color: #fff;
    }
  }
}