@use "../mixins/bem" as *;
@use "../mixins/function" as *;

@include b(postItem) {
  margin-bottom: 14px;
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: getCssVar("shadow-1");
  transition: all 0.3s;
  background-color: getCssVar("bg-color-2");

  &:hover {
    box-shadow: getCssVar("shadow-2");
  }

  .pin {
    position: absolute;
    overflow: hidden;
    width: 30px;
    height: 30px;
    top: -4px;
    left: -4px;
    opacity: 0.5;

    &::before {
      content: "";
      position: absolute;
      width: 120%;
      height: 30px;
      background-image: linear-gradient(45deg, getCssVar("theme-color"), getCssVar("theme-color"));
      transform: rotate(-45deg) translateY(-20px);
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.23);
    }
  }

  @include e(info) {
    @include e(info__left) {
      padding: 16px 24px;
      flex: 1;

      .title {
        font-size: 20px;
        font-weight: 600;
        display: block;
        cursor: pointer;
      }

      @include e(info__left__footer) {
        margin-top: 8px;
      }

      @include e(info__left__excerpt) {
        margin: 0.5rem 0;

        &.bottom {
          border-top: 1px solid getCssVar("line-color");
          .excerpt {
            overflow: hidden;
            display: -webkit-box;
            margin: 0.5rem 0;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            line-clamp: getCssVar("home-post-line-clamp");
            -webkit-line-clamp: getCssVar("home-post-line-clamp");
          }
        }

        .excerpt {
          color: getCssVar("lower-color-1");
          font-size: 14px;
          h1,
          h2,
          h3 {
            display: none;
          }

          img {
            max-height: 280px;
            max-width: 100%;
            margin: 0 auto;
          }
        }

        .more {
          float: right;
          line-height: 16px;
          color: var(--vp-c-brand-2);
          margin-right: 16px;

          &:hover {
            color: getCssVar("theme-color");
          }
        }
      }
    }

    @include e(info__right) {
      .cover-img {
        cursor: pointer;
        height: 100%;
        .default {
          width: getCssVar("home-post-simple-img-width");
          height: getCssVar("home-post-simple-img-height");
          border-radius: 2px;
          margin-right: 24px;
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
        }
        .full {
          width: getCssVar("home-post-full-img-width");
          height: getCssVar("home-post-full-img-height");
          object-fit: cover;
       //   clip-path: polygon(0 0, 100% 0, 100% 100%, 8% 100%);
          transition: transform 0.3s linear;
          // 鼠标悬停图片放大，且不要模糊
          &:hover {
            transform: scale(1.1, 1.1);
          }
        }
      }

      @media (max-width: 968px) {
        .default,
        .full {
          display: none;
        }
      }
    }
  }
}