.yc-page-header {
  padding: 16px 0px;
  display: flex;
  flex-direction: column;
  gap: 12px;

  .yc-page-header-wrapper {
    padding: 0 20px 0 24px;

    .yc-page-header-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      line-height: 28px;
      .yc-page-header-main {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        .yc-icon-button {
          margin-right: 12px;
          color: var(--color-text-2);
          font-size: 14px;
          .yc-icon {
            transform: rotate(180deg);
          }
        }
        .yc-page-header-title {
          color: var(--color-text-1);
          font-weight: 600;
          font-size: 20px;
        }
        .yc-page-header-subtitle {
          color: var(--color-text-3);
          font-size: 14px;
        }
      }
      .yc-page-header-extra {
        overflow: hidden;
        white-space: nowrap;
      }
    }
  }
  .yc-page-header-content {
    padding: 20px 32px;
    border-top: 1px solid var(--color-neutral-3);
  }
}
