$prefix-cls: "#{$namespace}-home-quick-enter";

.#{$prefix-cls} {
  padding: 0 !important;
  // margin-bottom: $space-b2;

  header {
    position: relative;
    padding: $space-b2 $space-b3;
    border-bottom: 1px solid $color-gray-3;

    .lj-define-header {
      padding-bottom: 0;
    }

    .control {
      position: absolute;
      right: $space-b3;
      top: 0;
      bottom: 0;
      margin: auto;
      //   display: none;
      transition: all 0.2s ease-in-out;
    }
  }
  main {
    display: flex;
    flex-wrap: wrap;
    padding: $space-b2 $space-b3;

    .empty {
      margin: auto;
      padding: $space-b3 $space-b4;
      text-align: center;
      cursor: pointer;
    }
    :deep(.enter-item) {
      // float: left;
      cursor: pointer;
      padding: $space-b2 $space-b3;
      margin-left: $space-a1;
      margin-right: $space-a1;
      margin-bottom: $space-a1;

      .el-badge {
        margin: $space-b1 auto;
        // padding-bottom: $space-b1;
      }

      &.func_add {
        .el-badge {
          margin: auto;
        }
      }
      .icon {
        & > * {
          width: $space-b5;
          height: $space-b5;
        }
        i.iconfont {
          font-size: $space-b5;
        }
      }
      .title {
        width: 100px;
        text-align: center;
      }
      &:hover,
      &.is-edit {
        background-color: $color-gray-2;
        border-radius: $br-md;
      }

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

      &.is-edit {
        cursor: move;
      }

      .edit-btn {
        position: absolute;
        top: -8px;
        right: -8px;

        .iconfont {
          font-size: 16px;
        }
      }

      &.small {
        padding: $space-b1;

        .icon i.iconfont {
          font-size: $space-b3;
        }
        .title {
          width: 80px;
          @include text-style-footnote-description;
        }
      }
      &.large {
        .icon i.iconfont {
          font-size: $space-b4;
        }
        .title {
          width: 120px;
          @include text-style-h-5-regular;
        }
      }
    }
  }

  &:not(.is-edit) {
    header .control .hide {
      opacity: 0;
    }
    // main {
    :deep(.enter-item) {
      &.func_add {
        // opacity: 0;
        .el-badge {
          margin: auto;
        }
      }
    }
    // }
  }
  &:hover {
    header .control .hide {
      //   display: flex;
      opacity: 1 !important;
    }
  }
}
