.#{$ns}Panel {
  //固定标题
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
  // margin-bottom: var(--Panel-marginBottom);
  background: var(--saas-main-bg);
  // border: var(--Panel-border);
  border-radius: var(--Panel-borderRadius);
  // -webkit-box-shadow: var(--Panel-boxShadow);
  // box-shadow: var(--Panel-boxShadow);

  &-Combination {
    .#{$ns}Crud {
      .#{$ns}Crud-head {
        min-height: 0;
      }
  
      .#{$ns}Table {
        padding: 0 8px 8px 8px;
      }
    }
    .#{$ns}Card {
      border-top: unset;
    }
    
    .#{$ns}List-items {
      border: none;

      .#{$ns}ListItem-wapper {
        border: none !important;
      }
    }

    // 保证只应用第一次
    .#{$ns}Grid:first-of-type {
      height: 100% !important;

      &-col--md,
      .grid-item {
        height: 100%;
      }
    }

    .#{$ns}Carousel {
      height: 100%;
      text-align: center;

      &-item {
        display: flex;
        flex-direction: column;

        .#{$ns}Image {
          height: 100%;
        }

        &>div:first-child {
          height: 80%;
        }

        &>span:nth-child(2) {
          font-size: 13px;
          font-weight: bold;
        }

        &>span:nth-child(3) {
          font-size: 13px;
        }
      }
    }
  }

  &-fixedBottom {
    position: absolute;
    background: var(--white);
    z-index: -1;
    opacity: 0;
    bottom: 999999px;
    box-shadow: var(--Panel-fixedBottom-boxShadow);
    border-top: var(--Panel-fixedBottom-borderTop);

    &.in {
      position: fixed;
      bottom: 0;
      z-index: $zindex-affix;
      opacity: 1;
    }
  }

  &.in-modal {
    .#{$ns}Panel-heading {
      padding-top: 0;
    }
  }

  // &--form {
  //   display: block;
  // }

  /* 主题 */
  &--default {
    border-color: var(--borderColor);

    >.#{$ns}Panel-heading {
      background: var(--Panel--default-bg);
      color: var(--Panel--default-color);

      .badge {
        color: var(--Panel--default-badgeColor);
        background: var(--Panel--default-badgeBg);
      }
    }

    >.#{$ns}Panel-heading {
      border-color: var(--Panel--default-headingBorderColor);
    }
  }

  &--primary {
    border-color: var(--primary);

    >.#{$ns}Panel-heading {
      background: var(--primary);
      color: var(--white);

      .badge {
        color: var(--primary);
        background: var(--white);
      }
    }

    >.#{$ns}Panel-heading,
    >.#{$ns}Panel-footer {
      border-color: var(--primary);
    }
  }

  &--success {
    border-color: var(--success);

    >.#{$ns}Panel-heading {
      background: var(--success);
      color: var(--white);

      .badge {
        color: var(--success);
        background: var(--white);
      }
    }

    >.#{$ns}Panel-heading,
    >.#{$ns}Panel-footer {
      border-color: var(--success);
    }
  }

  &--info {
    border-color: var(--info);

    >.#{$ns}Panel-heading {
      background: var(--info);
      color: var(--white);

      .badge {
        color: var(--info);
        background: var(--white);
      }
    }

    >.#{$ns}Panel-heading,
    >.#{$ns}Panel-footer {
      border-color: var(--info);
    }
  }

  &--warning {
    border-color: var(--warning);

    >.#{$ns}Panel-heading {
      background: var(--warning);
      color: var(--white);

      .badge {
        color: var(--warning);
        background: var(--white);
      }
    }

    >.#{$ns}Panel-heading,
    >.#{$ns}Panel-footer {
      border-color: var(--warning);
    }
  }

  &--danger {
    border-color: var(--danger);

    >.#{$ns}Panel-heading {
      background: var(--danger);
      color: var(--white);

      .badge {
        color: var(--danger);
        background: var(--white);
      }
    }

    >.#{$ns}Panel-heading,
    >.#{$ns}Panel-footer {
      border-color: var(--danger);
    }
  }

  /* 子组件 */
  &-heading {
    padding: var(--Panel-headingPadding);
    border-bottom: var(--Panel-headingBorderBottom);
    border-radius: var(--Panel-headingBorderRadius);
    display: flex;
    flex-wrap: wrap;

    &--combination {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid var(--saas-Border-Dividers);
      border-bottom: 1px solid var(--saas-Border-Dividers);
      margin-top: -1px;
      background-color: var(--saas-main-bg);
    }
  }

  &-title {
    margin-top: var(--Panel-titleMarginTop);
    margin-bottom: var(--Panel-titleMarginBottom);
    font-size: var(--Panel-titleFontSize);
    color: var(--Panel-titleColor);
  }

  &-extra {
    display: flex;
    align-items: center;

    .icon {
      top: 0;
      color: var(--saas-Placeholder-Text);
      cursor: pointer;
      &:hover {
        color: #3574ee;
      }
    }
  }

  &-body {
    // padding: var(--Panel-bodyPadding);
    flex: 1;
    overflow-y: auto;
    background: var(--saas-main-bg);
  }

  &-footerWrap {
    &-statistics {
      border-top: var(--Panel-border);
      padding: 0.5rem 0.75rem;
    }
  }

  &-footer {
    border-color: var(--Panel-footerBorderColor);
    border-radius: var(--Panel-footerBorderRadius);
    background: var(--Panel-footerBg);
    padding: var(--Panel-footerPadding);
    border-style: solid;
    border-width: var(--Panel-borderWidth) 0 0 0;
    clear: both;

    .#{$ns}Button+.#{$ns}Button {
      margin-left: var(--Panel-footerButtonMarginLeft);
    }
  }

  &-statistics {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }

  &-btnToolbar {
    @include clearfix();
    text-align: var(--Panel-btnToolbarTextAlign);
    display: flex;
    justify-content: flex-end;

    .#{$ns}Button {
      margin-left: var(--Panel-footerButtonMarginLeft);
    }

    &:empty {
      display: none;
    }
  }

  &--form {
    >.#{$ns}Panel-body {
      padding-left: 8px;
      padding-right: 8px;
    }
  }
}

/* 移动端样式调整 */
@include media-breakpoint-down(sm) {
  .#{$ns}Panel {

    .#{$ns}Panel {
      padding: 0;
    }

    &-Combination {
      background-color: var(--saas-Background-Header);
      padding: 0px 8px;

      .#{$ns}Grid {
        overscroll-behavior: auto;
      }
    }

    &-heading {
      &--combination {
        padding: 8px 0;
        border: none;
      }
    }

    &-title {

      &--combination {
        font-size: 18px;
        color: var(--saas-Title-Text);
        width: fit-content;
        max-width: calc(100% - 24px);
        font-weight: 500;
        line-height: 36px;
        padding: 0 8px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }

  }

  .#{$ns}Panel--form {
    border: none;
    box-shadow: none;

    margin: 0 calc(var(--Panel-bodyPadding) * -1) calc(var(--Panel-marginBottom) / 2);

    .#{$ns}Panel-body {
      overflow-x: hidden;
      padding: 0 0 var(--gap-md);
    }

    >.#{$ns}Panel-heading {
      background: none;
      border: none;
      border-radius: 0;

      .#{$ns}Panel-title {
        padding-left: var(--Panel-bodyPadding);
        border-left: px2rem(3px) solid var(--primary);
        font-size: var(--fontSizeLg);
      }
    }

    .#{$ns}Panel-footerWrap {
      padding-bottom: var(--Panel-bodyPadding);
    }

    .#{$ns}Panel-footer {
      border-top: none;
      display: flex;
      padding: 0 var(--Panel-bodyPadding);

      >.#{$ns}Button {
        flex: 1;

        &:first-child {
          margin-left: 0;
        }
      }
    }

    &.detail-form-panel {
      height: calc(100vh - 38px) !important;
    }

    &.detail-form-panel.with-fix-footer {
      height: calc(100vh - 38px) !important;
    }
  }

  .#{$ns}Grid {
    .#{$ns}Panel--form {
      &.detail-form-panel {
        height: 100% !important;
      }
  
      &.detail-form-panel.with-fix-footer {
        height: 100% !important;
      }
    }
  }

  .#{$ns}Panel {
    &-body {
      padding: 0;
    }
  }

  .tree-layout {
    .#{$ns}Panel-body {
      padding: 0;

      .#{$ns}Form {
        padding-bottom: 8px;
      }
    }

    .resize-sensor {
      display: none;
    }
  }

  .tree-layout+.#{$ns}Panel {
    border: none;

    >.#{$ns}Panel-body {
      .#{$ns}Grid {
        .mobile-grid-item {
          .#{$ns}Panel {
            .#{$ns}Panel-body {
              .#{$ns}Crud {
                .#{$ns}Table {
                  .#{$ns}Mobile-header-toolbar-wrapper {
                    border-top: 0;
                  }
                }
              }
            }
          }
        }
      }

      >.#{$ns}Crud {
        .#{$ns}Table {
          .#{$ns}Mobile-header-toolbar-wrapper {
            margin: 0;
          }
        }
      }
    }
  }
}