@import 'variable.scss';

#{$biz-css-prefix}page {
  &-header {
    box-sizing: content-box;
    // MODIFIED
    //max-height: var(--page-header-max-height);
    margin-bottom: var(--page-section-gap);
    padding: var(--page-padding-tb) var(--page-header-padding-lr) var(--page-block-padding-tb);

    &-tag {
      line-height: calc(var(--tag-size-m-height, 24px) - var(--tag-border-width, 1px) * 2);
      font-size: 0;
      padding: 0;
      height: var(--tag-size-m-height, 24px);
      cursor: default;
      color: var(--tag-bordered-text-color, #284cc0);
      border-color: var(--tag-bordered-border-color, #dbdde4);
      background-color: var(--tag-bordered-bg, #ffffff);
      box-sizing: border-box;
      display: inline-block;
      max-width: 100%;
      vertical-align: middle;
      border-width: var(--tag-border-width, 1px);
      border-radius: var(--tag-corner-radius, 500px);
      box-shadow: var(--tag-shadow, none);
      border-style: solid;
      overflow: hidden;
      white-space: nowrap;
      transition: all 100ms linear;
      outline: 0;
      & > span {
        font-size: var(--tag-size-m-text-size, 12px);
        padding: 0 var(--tag-size-m-padding-lr, 12px);
        min-width: var(--tag-size-m-content-min-width, 40px);
        position: relative;
        display: inline-block;
        height: 100%;
        text-align: center;
        vertical-align: middle;
        max-width: 100%;
        cursor: default;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      &:not(:last-child) {
        margin-right: 4px;
      }
    }

    &--no-bottom-padding {
      padding-bottom: 0;
    }

    &--dividing {
      border-bottom: var(--line-1) solid var(--page-header-divider-color);
    }

    &--no-margin {
      margin-bottom: 0;
    }

    &--fixed {
      position: fixed;
      width: 100%;
      left: 0;
      top: 0;
      z-index: var(--elevation-4);
    }

    &-main {
      display: flex;
      width: 50%;
      max-width: 50%;
    }

    &-extra {
      flex: 1;
    }

    .cn-next-avatar-large {
      height: var(--page-header-avatar-size);
      width: var(--page-header-avatar-size);
      line-height: var(--page-header-avatar-size);
    }

    &-avatar {
      height: var(--page-header-avatar-size);
      flex: 0 0 var(--page-header-avatar-size);
      line-height: var(--page-header-avatar-size);
      margin-right: var(--page-p-medium-spacing);
      &-img {
        width: 100%;
        height: 100%;
      }
    }

    &-title {
      display: flex;
      align-items: center;
      height: 30px;
      white-space: nowrap;

      &-text {
        margin-right: #{$s-3};

        font-size: #{$s-5};
        line-height: var(--font-lineheight-small);
        font-weight: var(--font-weight-semi-bold);
        color: var(--color-text-title1);
      }
    }

    &-title-wrapper {
      overflow: hidden;
    }

    &-desc {
      margin-top: var(--page-p-el-margin);
      &-content {
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: break-word;
      }
    }
  }

  &-footer {
    box-sizing: border-box;
    margin-top: var(--page-section-gap);
    flex: 0 0 auto;
    padding: var(--page-block-padding-tb) var(--page-footer-padding-lr) var(--page-padding-tb);

    &--dividing {
      border-top: var(--line-1) solid var(--page-header-divider-color);
    }

    &--fixed {
      position: fixed;
      width: 100%;
      left: 0;
      bottom: 0;
      z-index: var(--elevation-4);
    }
  }

  &-header,
  &-footer {
    &--no-top-padding {
      padding-top: 0;
    }

    &-inner {
      box-sizing: border-box;
      margin-left: auto;
      margin-right: auto;
      max-width: var(--page-max-content-width);
      display: flex;
    }
  }

  &-header--fullwidth &-header-inner,
  &-footer--fullwidth &-footer-inner {
    max-width: none;
  }
}

#{$biz-css-prefix}page--no-padding #{$biz-css-prefix}page-header {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}

#{$biz-css-prefix}page--no-padding #{$biz-css-prefix}page-footer {
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 584px) {
  #{$biz-css-prefix}page {
    &-header {
      &-inner {
        flex-wrap: wrap;
      }

      &-main {
        min-width: 100%;
      }

      &-extra {
        flex: 1;
        margin-top: var(--page-p-el-margin);
      }
    }
  }
}