@import '~antd/lib/style/themes/default.less';
@import './default.less';

.pageHeader {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  background: @component-background;
  padding: 16px 0px;
  // border-bottom: @border-width-base @border-style-base @border-color-split;

  .title_block {
    display: flex;
    flex-direction: row;
    align-items: center;
    line-height: 1;
    h1 {
      line-height: 1;
    }
  }


  .title_text {
    .font_18;
    font-weight: 700;
    margin-bottom: 0;
  }
}

.blue_block {
  width: 4px;
  height: 18px;
  margin-right: 7px;
  border-radius: 4px;
  background-color: @blue;
}

@media screen and (max-width: @screen-xl) {
  .pageHeader {
    .extraContent {
      margin-left: 44px;
    }
  }
}

@media screen and (max-width: @screen-lg) {
  .pageHeader {
    .extraContent {
      margin-left: 20px;
    }
  }
}

@media screen and (max-width: @screen-md) {
  .pageHeader {
    .page_row {
      display: block;
    }

    .action,
    .extraContent {
      margin-left: 0;
      text-align: left;
    }
  }
}

@media screen and (max-width: @screen-sm) {
  .pageHeader {
    .detail {
      display: block;
    }
  }
}

@media screen and (max-width: @screen-xs) {
  .pageHeader {
    .action {
      :global {
        .ant-btn-group,
        .ant-btn {
          display: block;
          margin-bottom: 8px;
        }
        .ant-btn-group > .ant-btn {
          display: inline-block;
          margin-bottom: 0;
        }
      }
    }
  }
}