/* ---- Featured Image block ---- */

.wp-block-post-featured-image,
.wp-block-post-featured-image.alignwide img,
.wp-block-post-featured-image.alignfull img {
  max-width: 300px;
}

.wp-block-post-featured-image.is-style-medium,
.wp-block-post-featured-image.is-style-medium.alignwide img,
.wp-block-post-featured-image.is-style-medium.alignfull img {
  max-width: 450px;
}

.wp-block-post-featured-image.is-style-full-width,
.wp-block-post-featured-image.is-style-full-width img {
  max-width: none;
}

.wp-block-post-featured-image.is-style-full-width {
  float: none !important;
}

.wp-block-post-featured-image.alignfull img {
  border-radius: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.wp-block-post-featured-image a {
  border: none;
  padding-bottom: 0;
}

.wp-block-post-featured-image
  .wp-block-post-featured-image__overlay.has-background-dim {
  border-radius: 16px;
}

/* Color Contrast */
.wp-block-post-featured-image.is-style-default,
.wp-block-post-featured-image.is-style-medium {
  &.alignwide,
  &.alignfull {
    padding: 1em;

    .mxs-dark-theme-bg &,
    .mxs-light-theme-bg .mxs-dark-bg & {
      background-color: var(--white-12pcnt);
    }

    .mxs-light-theme-bg &,
    .mxs-dark-theme-bg .mxs-light-bg {
      background-color: var(--black-12pcnt);
    }
  }
}

/* Alignments */
.wp-block-post-featured-image {
  &.alignleft {
    margin: 0 1em 1em 0;
  }

  &.alignright {
    margin: 0 0 1em 1em;
  }

  &.alignwide {
    max-width: 1024px;
  }

  &.alignfull {
    max-width: none;
  }

  &.alignwide,
  &.is-style-default.alignwide,
  &.is-style-medium.alignwide,
  &.alignfull {
    margin-left: auto;
    margin-right: auto;
  }

  &.is-style-default.alignfull,
  &.is-style-medium.alignfull {
    margin-left: 0;
    margin-right: 0;
  }
}

.page .wp-block-post-featured-image,
.single .wp-block-post-featured-image {
  &.alignleft {
    margin-left: var(--wp--style--root--padding-left);
  }

  &.alignright {
    margin-right: var(--wp--style--root--padding-right);
  }

  &.is-style-full-width,
  &.is-style-full-width.alignleft,
  &.is-style-full-width.alignright {
    margin-left: var(--wp--style--root--padding-left);
    margin-right: var(--wp--style--root--padding-right);
    max-width: calc(100% - 3rem);
  }

  img {
    max-height: 600px;
  }
}

@media (min-width: 1366px) {
  .wp-block-post-featured-image {
    &.alignleft {
      margin-left: 20%;
    }

    &.alignright {
      margin-right: 20%;
    }

    &.alignwide {
      margin-left: 20%;
      margin-right: 20%;
    }

    &.alignfull {
      margin-left: 0;
      margin-right: 0;
    }

    &.is-style-default.alignwide,
    &.is-style-medium.alignwide {
      border-radius: 16px;
      display: flex;
      justify-content: center;
    }
  }

  .blog .wp-block-post-featured-image {
    &.alignleft {
      margin-left: 0;
    }

    &.alignright {
      margin-right: 0;
    }
  }

  .page .wp-block-post-featured-image,
  .single .wp-block-post-featured-image {
    &.alignleft {
      margin-left: 20%;
    }

    &.alignright {
      margin-right: 20%;
    }

    &:not(.is-style-full-width) {
      padding-top: 3em;
      padding-bottom: 3em;
    }
  }

  .sticky .wp-block-post-featured-image {
    &.alignleft {
      margin-left: calc(10% - 1em);
    }

    &.alignright {
      margin-right: calc(10% - 1em);
    }

    &.alignwide {
      margin-left: 10%;
      margin-right: 10%;
    }

    &.alignfull {
      margin-left: 0;
      margin-right: 0;
    }

    &.is-style-full-width {
      margin-left: calc(10% - 1em);
      margin-right: calc(10% - 1em);
      max-width: calc(90% - 2em);
    }
  }
}
