:root {
  // used in icon mixin
  --amnesty-icon-path: url("../images/sprite.svg"), none;
}

.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;
}

// alt text field in editor
.page-hero + .components-base-control {
  display: none;
}
