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

.#{$prefix-cls} {
  .el-dialog__body {
    padding-top: 0;
    padding-bottom: 0;
    height: 60vh;
    overflow: auto;
    // flex: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--lj-color-gray-2);
  }

  &__select-part {
    overflow: auto;
    padding-top: $space-b2;
    padding-bottom: $space-b2;

    .el-tree {
      background-color: unset;

      .is-current {
        background-color: $color-primary-000 !important;
        --el-tree-node-hover-bg-color: $color-primary-000 !important;
        border-radius: $br-sm;
      }
    }
    .tree {
      padding: $space-a2 $space-b2;
      background-color: $color-gray-1;
      border-radius: $br-sm;
      box-sizing: border-box;
      width: 220px;

      & > header {
        // margin-bottom: $space-a2;
        padding-bottom: $space-b2;
        border-bottom: 1px solid $color-text-dividers;
      }
    }
    .content {
      padding: $space-a2 $space-b2;
      //   background-color: $color-gray-2;
      border-radius: $br-sm;
      box-sizing: border-box;
    }
  }
  &__layout-part {
    // overflow: auto;
    // height: 400px;

    .left,
    .right {
      background-color: $color-gray-1;
      border-radius: $br-sm;
      padding: $space-b2;
      box-sizing: border-box;

      .ghost-item {
        position: relative;
        margin: $space-b2 $space-a1;
        text-align: center;
        box-sizing: border-box;
        color: $color-gray-6;
        border: 1px dashed $color-gray-6;
        border-width: medium;
        border-radius: $br-md;

        .iconfont {
          font-size: $space-b5;
        }
        .del-btn {
          display: none !important;
        }
      }
      .func-item {
        position: relative;
        cursor: move;

        & + .func-item {
          margin-top: $space-b2;
        }
        .del-btn {
          display: none;
          position: absolute;
          right: $space-b3;
          top: $space-b1;
          z-index: 10;
        }
        &:hover .del-btn {
          display: block;
        }

        &.is-current {
          .longjoe-skeleton {
            border-color: $color-primary-300;
            box-shadow: 0 1px 2px -2px $color-primary-200, 0 3px 6px 0px $color-primary-100, 0 5px 12px 4px $color-primary-000;
            transform: translateY(-2px);
            transition: all 0.2s ease-in-out;
          }
        }
      }
    }
  }

  .func-menu {
    border: unset;
    .func-group {
      // clear: both;
      margin-bottom: $space-b2;
      // header {
      //   position: relative;
      //   margin-top: $space-b2;
      //   padding-top: $space-b1;
      //   padding-bottom: $space-b1;
      //   text-align: center;
      //   border-radius: $br-md;

      //   background-color: $color-gray-4;
      // }
      .func-group-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        .func-item {
          position: relative;
          margin: 0 $space-a1;
          padding: $space-b2 0;
          text-align: center;
          box-sizing: border-box;
          cursor: auto;

          &:not(.move) {
            color: $color-text-disable;
          }

          &.move:hover {
            color: $color-primary-500;
          }
          .iconfont {
            height: $space-a4;
            font-size: $space-b4;
            margin-bottom: $space-a1;
            cursor: auto;
          }
          &.move {
            cursor: move;
            .iconfont {
              cursor: move;
            }
          }
          .del-btn {
            position: absolute;
            // padding: $space-a1 $space-b1;
            // border-radius: $br-xl;
            right: 0;
            top: 0;
            // // transform: translateY(-50%);
            // background-color: $color-polar-green-5;
            // color: $color-gray-1;
            // font-size: 12px;
          }
        }
      }
    }

    .el-collapse-item {
      // background-color: unset;
      border-radius: $br-md;
      overflow: hidden;

      .el-collapse-item__header {
        padding-left: $space-b2;
        padding-right: $space-b2;
      }
      .el-collapse-item__wrap {
        border: unset;
      }
    }
  }

  &__aside-menu {
    .to_out_type {
      .el-divider--horizontal {
        // margin: $space-b2 0;

        .el-divider__text {
          color: $color-text-disable;
        }
      }

      .recommend-list {
        .recommend-item {
          cursor: pointer;
          float: left;
          margin-bottom: $space-a1;
          margin-right: $space-a1;

          &:hover {
            border-color: $color-primary-500;
            color: $color-primary-500;
          }

          .el-tag__content {
            display: flex;
            align-items: center;
          }
        }
      }

      .to-out_type-item {
        position: relative;
        margin-bottom: $space-b2;
        padding: $space-b2 $space-b1;
        background-color: $color-gray-2;
        border-radius: $br-md;

        .handle {
          cursor: move;
          color: $color-gray-6;
        }
        .del-btn {
          position: absolute;
          top: $space-b2;
          left: $space-b1;
          display: none;
        }
        &:hover {
          background-color: $color-gray-3;
          .del-btn {
            display: block;
          }
          .handle {
            color: $color-gray-10;
          }
        }

        .item-content {
          & > div + div {
            margin-top: $space-a1;
          }

          .el-date-editor.el-input {
            display: flex;
            flex: 1;
            width: unset;

            .el-input__wrapper {
              flex: 1;
            }
          }
          .title {
            flex-shrink: 0;
            min-width: 70px;
            text-align: right;
          }
        }
      }
    }
  }
}
