$prefix-cls: "#{$namespace}-detail-layout";

.#{$prefix-cls} {
  // padding: 0 $space-b2;
  // padding-top: 8px;

  &__wrapper {
    height: 100%;
  }

  &__header {
    // width: inherit !important;
    &-inner {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      // height: $space-a5;
      // padding: 0 $space-a2;
      background-color: var(--lj-color-gray-1);
      // border-bottom: 1px solid var(--el-border-color-light);
      border-radius: $br-sm;

      .setting-part {
        .el-button + .el-button {
          margin-left: 0;
        }
        & > *:not(:first-child) {
          margin-left: $space-b2 !important;
        }
      }

      .el-skeleton__paragraph {
        margin-top: 0;
      }
    }

    // .van-sticky--fixed {
    // @include effect-style-shadow-1-2-down;
    // width: inherit !important;
    // }

    &-icon {
      width: $space-b5;
      height: $space-b5;
      color: $color-gray-1;

      background: var(--li-linear-gradient-primary-1);
      border-radius: $space-b1;

      .iconfont,
      .el-icon {
        font-size: $space-b4;
      }
    }

    .el-button-group > .el-skeleton {
      float: left;
      display: contents;
    }
  }
  .basicinfo-container {
    margin-bottom: $space-a2;
    padding: $space-b1 $space-b2;
    background-color: $color-gray-1;
  }
  &__tabs {
    .van-sticky--fixed {
      z-index: 88;
    }
    .van-tab--shrink {
      padding: 0 $space-a2;
    }
    .van-tabs__line {
      background: $color-primary-500;
    }
    .van-tabs__wrap {
      border-bottom-left-radius: $br-sm;
      border-bottom-right-radius: $br-sm;
      flex-shrink: 0;
    }
    .van-tabs__content {
      padding: $space-a2 $space-b2;
      background-color: $color-gray-1;
    }
    .van-tabs__nav {
      background-color: $color-gray-1;
    }
    .van-tab--active {
      color: $color-text-primary-text;
    }

    &.scrollspy {
      .van-tabs__content {
        padding: 0;
        background-color: unset;
      }

      .van-tab__panel {
        padding: 16px 12px;
        background-color: $color-gray-1;

        & + .van-tab__panel {
          margin-top: $space-a2;
          border-radius: $br-sm;
        }
      }
    }
  }
  &__detail-header {
    padding: $space-a2 $space-b2;
    background: $color-gray-1;
  }

  // &.small {
  //   .#{$prefix-cls}__header {
  //     &-inner {
  //       height: $space-b5;
  //       padding: 0 $space-b2;
  //     }
  //   }
  // }
  &.fold-vertical {
    height: 100%;
    .#{$prefix-cls} {
      &__tabs {
        display: flex;
        flex-direction: column;
        height: 100%;

        .van-tabs__content {
          flex: 1;
          overflow: auto;
        }
        .van-tab__panel {
          height: 100%;
          display: flex;
          flex-direction: column;
        }
      }
    }
  }

  &:not(.fold-vertical) {
    height: 100%;
    overflow: auto;
  }
}

.lj-main-body.small {
  .basicinfo-container {
    margin-bottom: $space-a1;
    padding: $space-a1 $space-b1;
  }

  .#{$prefix-cls} {
    &__tabs {
      &.scrollspy {
        .van-tab__panel {
          padding: $space-b1 $space-a1;

          & + .van-tab__panel {
            margin-top: $space-a1;
          }
        }
      }
    }
  }
}

.van-sticky--fixed {
  .#{$prefix-cls} {
    &__header-inner {
      box-shadow: $shadow-0-down;
    }
  }
}

.#{#{$namespace}}-detail-layout-settings {
  .el-drawer__body {
    padding: 0 !important;
    background-color: $color-gray-2;
  }
}