/* Base layer and zero specificity let layout utilities override defaults. */
@layer base {
  :where(.probots-ai-image) {
    --probots-ai-label-inset: 0.5rem;
    position: relative;
    display: inline-block;
    max-width: 100%;
    vertical-align: middle;
  }

  :where(.probots-ai-image > picture, .probots-ai-image > img) {
    display: block;
  }

  :where(.probots-ai-image--cover, .probots-ai-image--cover > picture, .probots-ai-image--cover > picture > img) {
    display: block;
    width: 100%;
    height: 100%;
  }

  :where(.probots-ai-image--cover > picture > img) {
    object-fit: cover;
  }
}

.probots-ai-image__badge {
  position: absolute;
  bottom: var(--probots-ai-label-inset);
  right: var(--probots-ai-label-inset);
  z-index: 1;
  display: block;
  width: var(--probots-ai-label-width, 6rem);
  max-width: calc(100% - 2 * var(--probots-ai-label-inset));
  line-height: 0;
  pointer-events: none;
}

.probots-ai-image__badge[data-size='medium'] {
  width: var(--probots-ai-label-width, 9rem);
}

.probots-ai-image__badge[data-size='large'] {
  width: var(--probots-ai-label-width, 12rem);
}

.probots-ai-image__badge > svg {
  display: block;
  width: 100%;
  height: auto;
}

.probots-ai-image__badge[data-position='top-left'],
.probots-ai-image__badge[data-position='top-center'],
.probots-ai-image__badge[data-position='top-right'] {
  top: var(--probots-ai-label-inset);
  bottom: auto;
}

.probots-ai-image__badge[data-position='top-left'],
.probots-ai-image__badge[data-position='center-left'],
.probots-ai-image__badge[data-position='bottom-left'] {
  left: var(--probots-ai-label-inset);
  right: auto;
}

.probots-ai-image__badge[data-position='top-center'],
.probots-ai-image__badge[data-position='bottom-center'] {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

.probots-ai-image__badge[data-position='center-left'],
.probots-ai-image__badge[data-position='center-right'] {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}