@import url(../var.less);

@page-header-prefix: ~"@{prefix}page-header";

.@{page-header-prefix}{
  padding: 16px 24px;
  &__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    &--left {
      display: flex;
      cursor: pointer;
      
      .w-page-header__headeing--icon {
        font-size: 18px;
        margin-right: 6px;
        align-self: center;
        color: @page-header-icon-color;
      }
  
      .w-page-header__heading--title {
        font-size: @page-header-title-font;
        font-weight: 500;
        margin-right: 12px;
      }
      .w-page-header__heading--subtitle {
        font-size: @page-header-subtitle-font;
        color: @page-header-subtitle-color;
      }
    }
  
    
  }

  &.is-ghost {
    background: inherit;
  }

  &.has-header {
    .w-page-header__heading {
      margin-top: 12px;
    }
  }

  // &.has-content {
  //   .w-page-header__content {
  //     margin-top: 12px;
  //   }
  // }
}