$prefix-cls: "#{$namespace}-home_widget-mySysPost";

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

  @for $i from 1 through 4 {
    &.adaptive_#{$i} {
      .#{$prefix-cls}__post-item {
        $item-width: calc(100% / $i);
        width: $item-width;
        width: -webkit-calc($item-width - $space-a1 * 2);
        width: -moz-calc($item-width - $space-a1 * 2);
        width: -o-calc($item-width - $space-a1 * 2);
        width: calc($item-width - $space-a1 * 2);
      }
    }
  }

  & > 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;

      .binding-btn {
        opacity: 0.3;
      }
    }
  }
  & > main {
    display: flex;
    padding: $space-b2 $space-b3;
  }

  .empty {
    margin: auto;
    padding: $space-b3 $space-b4;
    text-align: center;
  }

  &__grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 $space-a1 * -1;
  }

  &__post-item {
    border-radius: $br-md;
    overflow: hidden;
    border: 1px solid $color-gray-4;
    cursor: pointer;
    transform: translateY(0);
    transition: all 0.1s ease-in-out;

    margin: $space-a1 $space-a1;
    box-sizing: border-box;

    &:active {
      transform: translateY(2px);
    }

    // & + .#{$prefix-cls}__cust-item {
    //   margin-top: $space-b1;
    // }

    & > header {
      position: relative;
      padding: $space-b1 $space-b2;
    }

    &.is-active > header {
      background: linear-gradient(320deg, rgba(255, 153, 0, 0.5) 0%, rgba(247, 206, 104, 0.3) 100%);
    }

    & > main {
      position: relative;
      padding: $space-b1 $space-b2;
    }

    &-avatars {
      width: $space-b4;
      height: $space-b4;
      .iconfont {
        font-size: $space-b3;
        color: $color-gray-7;
      }
    }

    .tag-list {
      span + span {
        margin-left: 8px;
      }
      .iconfont {
        // margin-right: 2px;
        font-size: 13px;
      }
    }

    &-dashboard {
      text-align: center;
    }
  }

  &:hover {
    & > header {
      .control {
        .binding-btn {
          opacity: 1;
        }
      }
    }
  }
}
