/**
 * Image component styles
 *
 * Applies to all images with alt attribute (both decorative alt="" and semantic).
 * Uses CSS custom properties for flexible theming and responsive behavior.
 */
img[alt] {
  /* CSS Custom Properties - Override these for customization */
  --img-max-width: 100%;
  --img-height: auto;
  --img-object-fit: cover;
  --img-object-position: center;
  --img-aspect-ratio: auto 2/3;
  --img-display: inline-block;

  /* Layout - Responsive by default */
  max-width: var(--img-max-width);
  max-inline-size: var(--img-max-width); /* Logical property for i18n */
  block-size: var(--img-height);
  display: var(--img-display);
  vertical-align: middle;

  /* Object fitting for responsive images */
  object-fit: var(--img-object-fit);
  object-position: var(--img-object-position);
  aspect-ratio: var(--img-aspect-ratio);

  /* Accessibility - Italic font for broken image alt text */
  font-style: italic;

  /* Background for loading state */
  background-size: cover;
  background-repeat: no-repeat;

  /* Shape margin for text wrapping */
  shape-margin: var(--spc-3);
}

figure {
  &:has(img[alt]) {
    --fig-display: flex;
    --fig-padding: 0.5rem;
    --fig-bg: var(--color-surface-tertiary);
    --fig-width: fit-content;
    display: var(--fig-display);
    position: relative;
    padding: var(--fig-padding);
    background-color: var(--fig-bg);
    max-width: var(--fig-width);
    > figcaption {
      position: absolute;
      bottom: var(--fig-bottom, var(--fig-padding));
      left: var(--fig-left, var(--fig-padding));
      right: var(--fig-right, var(--fig-padding));
      padding: var(--caption-padding, var(--spc-3));
      background-color: var(--fig-bg);
    }
  }
}