.blockComponentsRoot {
  flex-shrink: 0;
  border-right: 1px solid var(--kw-line-color);
  transition: width 0.2s;

  .group-title {
    position: relative;
    padding-left: 8px;
    line-height: 18px;
    font-size: 12px;
    &::before {
      content: '';
      position: absolute;
      display: inline-block;
      width: 2px;
      height: 11px;
      left: 0;
      top: 3px;
      background: var(--kw-primary-color);
    }
  }

  .card-component-item {
    width: calc((100% - 12px) / 2);
    margin-bottom: 16px;
    font-size: 12px;
    &:not(:nth-of-type(2n)) {
      margin-right: 12px;
    }

    .card-img {
      position: relative;
      height: 100px;
      border: 1px solid var(--kw-line-color);
      & > img {
        max-width: 100%;
        max-height: 100%;
        background-size: cover;
      }
      &:hover .mask-btn {
        display: block;
      }
      .mask-btn {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        z-index: 1;
        background: rgba(0, 0, 0, 0.45);
        line-height: 100px;
        text-align: center;
        user-select: none;
        font-size: 14px;
        color: #fff;

        & > span::before {
          content: '+';
          display: inline-block;
          vertical-align: middle;
          margin-right: 6px;
          font-size: 24px;
          height: 20px;
          line-height: 10px;
          color: #eee;
        }
      }
    }
  }

  .bar-icon {
    width: 56px;
    height: 56px;
    line-height: 56px;
    text-align: center;
  }

  .opened-menu {
    position: relative;
    padding-bottom: 56px !important;
    overflow: auto;
    .bar-icon {
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }
}
