@use 'mixins/amixin' as *;
.recent-posts {
  .block-title {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1px;
    margin-bottom: 20px;
    word-spacing: 1px;
  }
  .list {
    .item {
      min-height: 60px;
      margin-bottom: 29px;
      .post-img {
        margin-right: 18px;
        &:before {
          content: '';
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          opacity: 0;
          background-color: var(--mat-sys-primary);
          @include transition(all, 200ms, ease-in-out);
          @include border-radius(3px, 3px, 3px, 3px);
        }
        .mat-icon {
          font-size: 20px;
          opacity: 0;
          color: var(--mat-sys-on-primary);
          @include middle-center();
          @include transition(all, 200ms, ease-in-out);
        }
        &:hover:before,
        &:hover .mat-icon {
          cursor: pointer;
          opacity: 1;
        }
        ::ng-deep img {
          width: 90px;
          height: 60px;
          @include border-radius(3px, 3px, 3px, 3px);
        }
      }
      .blog-title ::ng-deep a {
        display: block;
        font-size: 13px;
        margin-bottom: 7px;
        margin-top: -3px;
        margin-left: 108px;
        color: var(--mat-sys-on-surface);
        &:hover {
          color: var(--mat-sys-primary);
        }
      }
      .blog-date,
      .blog-categories {
        margin-bottom: 5px;
        display: block;
        font-size: 12px;
        font-style: italic;
        margin-left: 108px;
      }
      &.no-img {
        .blog-title ::ng-deep a,
        .blog-date {
          margin-left: 0;
        }
      }
    }
  }
}
