@m-layout-prefix-cls: m-layout;
@m-layout-header-height: 48px;

.@{m-layout-prefix-cls}-header {
  display: flex;
  align-items: center;
  height: @m-layout-header-height;
  padding: 0 16px;
  background: #fff;
  box-shadow: 0 2px 8px 0 rgba(15, 15, 15, 0.04), 0 1px 0 0 rgba(233, 236, 242, 0.65);

  &-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-right: 12px;
    cursor: pointer;
    background: #f5f7fa;
    border-radius: 2px;
  }

  &-info {
    flex: 1;

    .router-area {
      font-size: 12px;
      font-weight: 400;
      color: #324558;
    }

    .icon-separate {
      padding: 0 8px;
      color: #e9ecf2;
    }
  }

  &-info,
  &-tools {
    display: flex;
    align-items: center;
    height: 100%;
  }
}