/**
 * Images responsive by default.
 *
 * 1. Fluid.
 * 2. Offset `alt` text from surrounding copy
 * 3. Setting `vertical-align` removes the whitespace that appears under `img`
 *    elements when they are dropped into a page as-is. Safer alternative to
 *    using `display: block;`.
 */
img {
  max-width: 100%;           /* 1 */
  font-style: oblique;        /* 2 */
  vertical-align: middle;    /* 3 */
}

/**
 * Styles for non-responsive images.
 *
 * 1. Respect if a `width` and/or `height` attribute have been explicitly defined.
 * 2. Fix Google Maps, doesn't like fluid images.
 */
img[width],        /* 1 */ /* stylelint-disable-line */
img[height],       /* 1 */ /* stylelint-disable-line */
.gm-style img {    /* 2 */ /* stylelint-disable-line */
  max-width: none;
}

/**
 * Remove default figure marging and padding.
 */
figure {
  margin: 0;
  padding: 0;
}

.has-caption {
  position: relative;

  &[class*="wp-image-"] {
    display: inline-block;
  }
}

.image-metadata {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  font-size: var(--wp--preset--font-size--small);
  background-color: color-mix(in srgb, var(--wp--preset--color--black) 55%, transparent);
  color: var(--wp--preset--color--white);
  word-break: keep-all;

  @include mq(small) {
    flex-direction: row;
    gap: 16px;
  }
}

.image-metadataItem {
  display: block;
  padding: 4px;
}

// specificity to avoid old image caption class collision
.image-metadataItem.image-caption {
  padding: 4px flexy-gutter();
  max-width: 800px;
  width: 100%;
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--grey-dark);
  text-align: left;

  @include mq(small) {
    padding: 4px;
    background-color: transparent;
    color: var(--wp--preset--color--white);
  }
}

.single .image-metadataItem.image-caption {
  padding: 4px var(--wp--preset--spacing--single);

  @include mq(small) {
    padding: 4px;
  }
}

.image-copyright {
  margin-left: auto;
  text-align: right;

  @include mq(small) {
    max-width: 400px;
  }
}

.rtl .image-metadataItem.image-caption {
  text-align: right;
}

.rtl .image-copyright {
  margin-right: auto;
  margin-left: 0;
  text-align: left;
}
