.wp-block-latest-posts {
  padding-left: 0;


  // Vertical margins logic

  // Post title
  > li > a {
    display: inline-block;
    @include title-box-style();
    width: 100%;
  }

  // Post author
  .wp-block-latest-posts__post-author {
    @include meta-style();
    display: inline;
    padding-right: 10px;
    clear: both;
  }

  // Post date
  .wp-block-latest-posts__post-date {
    @include meta-style();
    display: inline;

    [class*="inner-container"] &,
    .has-background & {
      color: currentColor;
    }
  }

  // Post content
  .wp-block-latest-posts__post-excerpt,
  .wp-block-latest-posts__post-full-content {
    font-family: var(--latest-posts--description-font-family);
    font-size: var(--latest-posts--description-font-size);
    line-height: var(--latest-posts--description-line-height);
    margin-top: var(--global--spacing-vertical-sm);
    margin-bottom: 0;
  }

  > li {

    margin-bottom: var(--latest-posts--bottom-space);
    padding: 15px 0;
    overflow: hidden;

    &:first-child {
      margin-top: 0;
    }

    &:last-child {
      margin-bottom: 0;
    }

    .wp-block-latest-posts__featured-image {

      width: 100%;
      position: relative;
      margin-top: -15px;
      padding-top: 15px;
      padding-left: 15px;
      margin-bottom: var(--global--spacing-horizontal);

      &:before {
        background: var(--global--color-secondary);
        content: '';
        display: block;
        bottom: 15px;
        position: absolute;
        top: 0;
        left: 0;
        right: 15px;
        z-index: 0;
      }

      img {
        width: 100%;
        height: auto;
        position: relative;
        z-index: 1;
      }

      a {
        width: 100%;
        display: block;
      }

      &.alignleft,
      &.alignright {

        @include media(tablet) {
          width: 250px;
          float: left;
        }

        + a {

          display: block;

          + div {

            display: inline-block;

            + time {

              + div {

                @include media(tablet) {
                  float: left;
                  width: calc(100% - 280px);
                }

              }

            }

          }
        }


      }

      &.alignleft {
        margin-right: var(--global--spacing-horizontal);
      }

      &.alignright {
        float: right;
        margin-left: var(--global--spacing-horizontal);
      }

    }
  }

  &.is-grid {
    word-wrap: break-word;
    word-break: break-word;

    > li {
      margin-bottom: var(--latest-posts--bottom-space-grid);
      position: relative;
      font-size: 24px;
      box-sizing: border-box;


      &:last-child {
        margin-bottom: 0;
      }
    }

    &.columns-3,
    &.columns-4,
    &.columns-5,
    &.columns-6 {

      .wp-block-latest-posts__featured-image {


        &.alignleft,
        &.alignright {


          @include media(tablet) {
            width: 150px;
            float: left;
          }

          + a {


            + div {
              + time {

                + div {

                  @include media(tablet) {
                    float: right;
                    width: calc(100% - 180px);

                  }

                }

              }
            }
          }
        }
      }
    }

    // Remove bottom margins in grid columns
    &.columns-2 > li:nth-last-child(-n + 2):nth-child(2n + 1),
    &.columns-2 > li:nth-last-child(-n + 2):nth-child(2n + 1) ~ li,
    &.columns-3 > li:nth-last-child(-n + 3):nth-child(3n + 1),
    &.columns-3 > li:nth-last-child(-n + 3):nth-child(3n + 1) ~ li,
    &.columns-4 > li:nth-last-child(-n + 4):nth-child(4n + 1),
    &.columns-4 > li:nth-last-child(-n + 4):nth-child(4n + 1) ~ li,
    &.columns-5 > li:nth-last-child(-n + 5):nth-child(5n + 1),
    &.columns-5 > li:nth-last-child(-n + 5):nth-child(5n + 1) ~ li,
    &.columns-6 > li:nth-last-child(-n + 6):nth-child(6n + 1),
    &.columns-6 > li:nth-last-child(-n + 6):nth-child(6n + 1) ~ li {
      margin-bottom: 0;
    }
  }

  // Utility classes
  &.alignfull {
    padding-left: var(--global--spacing-unit);
    padding-right: var(--global--spacing-unit);

    .entry-content [class*="inner-container"] &,
    .entry-content .has-background & {
      padding-left: 0;
      padding-right: 0;
    }
  }

  // Block Styles
  &.is-style-canvi-latest-posts-dividers {
    border-top: var(--separator--height) solid var(--global--color-text-lighten);
    border-bottom: var(--separator--height) solid var(--global--color-text-lighten);

    &:not(.is-grid) > li,
    > li {
      padding-bottom: var(--global--spacing-vertical);
      border-bottom: var(--separator--height) solid var(--global--color-text-lighten);
      margin-top: var(--global--spacing-vertical-sm);
      margin-bottom: var(--global--spacing-vertical-sm);

      &:last-child {
        padding-bottom: 0;
        border-bottom: none;
      }
    }

    &.is-grid {

      li {
        margin: 0;
        padding-top: var(--global--spacing-vertical);
        padding-right: var(--global--spacing-horizontal);

        &:last-child {
          padding-bottom: var(--global--spacing-vertical);
        }
      }

      // This is using a non-standard media query because it is directly overriding the gutenberg-provided widths.
      // https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/latest-posts/style.scss#L28-L34
      @media screen and (min-width: 600px) {
        @for $i from 2 through 6 {
          &.columns-#{ $i } li {
            width: calc((100% / #{ $i }));
          }
        }
      }
    }
  }

  &.is-style-canvi-latest-posts-borders {

    li {
      border: 1px solid var(--global--color-text-lighten);
      padding: var(--global--spacing-vertical) var(--global--spacing-horizontal);

      &:last-child {
        padding-bottom: var(--global--spacing-vertical);
      }
    }

    &:not(.is-grid) li {
      margin-top: var(--global--spacing-horizontal);
      margin-bottom: var(--global--spacing-horizontal);
    }
  }
}