@charset "utf-8";
@import './_var';
.#{$prefix}page-root{
  height:100%;
}
.#{$prefix}content {
  background-color: $layout-color-bg-gray;
  height: 100%;
  overflow: initial;
  padding-left: 0;
  padding-right: 0;

  &__header {
    margin: 0;
    font-size: 0;
    height: auto;
    line-height: inherit;
    min-height: inherit;
    position: relative;
    border-bottom: 1px solid $layout-color-border;

    padding: 10px 20px;
    color: $layout-color-text-weight;
    background-color: $layout-color-bg;
    & h2 {
      display: inline-block;
      vertical-align: middle;
      font-size: $layout-font-size-xl;
      font-weight: $layout-font-weight;
      margin-right: 20px;
      max-width: 70%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      height: $layout-header-height;
      line-height: $layout-header-height;
    }
    .#{$prefix}content-header__text{
      font-size: $layout-font-size-default;
      display: inline-block;
      vertical-align: middle;
    }
  }

  &__body {
    background-color: $layout-color-bg-gray;
    padding:20px;
  }

  &__inner {
    max-width: $layout-inner-width;
    margin: 0 auto;
  }
}


.#{$prefix}content__inner.#{$prefix}content__inner--full {
  max-width: 100%;
  margin: 0 auto;
}

.#{$prefix}content__header-back {
  height: 26px;
  line-height: 26px;
  width: 26px;
  box-sizing: border-box;
  display: inline-block;
  text-align: center;
  margin-left: -6px;
  vertical-align: middle;
  margin-right: $layout-header-icon-back-margin-right;
}

.#{$prefix}content__header-back:hover {
  background-color: rgba(0,0,0,.05);
}

.#{$prefix}inner-wrap{
  position: absolute;
  top: 51px;
  bottom: 0;
  left: 0;
  right: 0;
}
.#{$prefix}inner-wrap__menu{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 200px;
  border-right: 1px solid $layout-color-border;
  background-color: $layout-color-bg;
  z-index: 10;
  box-sizing: border-box;
  -webkit-transition: all cubic-bezier(.4,0,.2,1) .2s;
  transition: all cubic-bezier(.4,0,.2,1) .2s;
}
.#{$prefix}inner-wrap__content{
  position: absolute;
  left: 200px;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: auto;
  -webkit-transition: all cubic-bezier(.4,0,.2,1) .2s;
  transition: all cubic-bezier(.4,0,.2,1) .2s;
}
.#{$prefix}inner-wrap__content .#{$prefix}content__header{
  border-bottom: 0;
  background-color: transparent;
}

.#{$prefix}sidebar {
  position: relative;
  height: 100%;
  vertical-align: top;
}
.#{$prefix}content__body.has-subsidebar{
  position: absolute;
  top: 51px;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0;
  overflow: hidden;
}

.has-subsidebar .#{$prefix}content{
  position: absolute;
  left: 200px;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: auto;
  -webkit-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
  transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}
.has-subsidebar .#{$prefix}content__header{
  border-bottom: 0;
  background-color: transparent
}
.has-subsidebar > .#{$prefix}content__inner{
  max-width: inherit;
  height: 100%;
}

//框架布局layout
.#{$prefix}layout{
  display: flex;
  color:$color-text;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;

  height: 100%;
  &__header {
    height: 50px;
  }
  &__content {
    background-color: $layout-color-bg-second;
    overflow-y: auto;

    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    .#{$prefix}content{
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1;

      position: relative;
      left: 0;

      display: flex;

      -webkit-box-orient: vertical;
      -webkit-flex-direction: column;
      -moz-flex-direction: column;
      -ms-flex-direction: column;
      -o-flex-direction: column;
      flex-direction: column;

      height: 100%;
    }
    .#{$prefix}content__body{
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1;
    }
    .#{$prefix}layout__footer{
      margin-top: -$layout-footer-height;
    }
    &-header{
      // height: 51px;
      flex:none;
    }
    &-body{
      padding: $layout-body-padding;
      position: relative;
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1 1 auto;
    }
    &-inner {
      box-sizing: border-box;

      display: flex;

      -webkit-box-orient: vertical;
      -webkit-flex-direction: column;
      -moz-flex-direction: column;
      -ms-flex-direction: column;
      -o-flex-direction: column;
      flex-direction: column;
      height: 100%;
    }
    &-body-inner {
        max-width: $layout-inner-width;
        margin: 0 auto;
    }
    &-body-inner.#{$prefix}layout__content-body-inner--full {
        max-width: 100%;
    }

  }
  &__footer {
    height:$layout-footer-height;
  }
  &__sidebar {
    position: relative;
    height: 100%;
    vertical-align: top;
    min-width: $layout-sidebar-min-width;
    width:auto;
    width:fit-content; // 为了safari下，saidebar收起时候，位置异常的问题。
  }
  &__body{
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;

    display: flex;

    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;

    overflow-y: auto;
  }
  &__body.has-subsidebar {
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-direction: row;
  }
  &__header-title {
    margin: 0;
    font-size: 0;
    height: auto;
    line-height: inherit;
    min-height: inherit;
    position: relative;
    border-bottom: 1px solid $layout-header-border-bottom-bg;
    padding: $layout-header-title-padding;
    color: $layout-color-text-weight;
    background: $layout-header-color-bg;
    &:after{
      content: "";
      position: absolute;
      left:0;
      top:0;
      bottom:-1px;
      width:2px;
      background-color: $layout-header-line-color-bg;
    }
    .#{$prefix}h2 {
        display: inline-block;
        vertical-align: middle;
        font-size: $layout-font-size-xl;
        font-weight: 700;
        margin-right: 20px;
        max-width: 70%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        height: $layout-header-height;
        line-height: $layout-header-height;
    }
  }
  &__header-text {
      font-size: $layout-font-size-default;
      display: inline-block;
      vertical-align: middle;
  }
  &__header-title--light{
    border-bottom: 0;
    background-color: transparent;
  }
}

.#{$prefix}layout.has-subsidebar{
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  -o-flex-direction: row;
  flex-direction: row;
}

// @media (max-width:768px){

//   .#{$prefix}layout__body.has-subsidebar{
//     flex-direction: column;
//   }
//   .#{$prefix}layout__sidebar{
//     width: 100%;
//     height: auto;
//     overflow: initial;
//   }
// }