/* ------------------------------
 メディア画像・画像・画像URL
------------------------------ */

/* 管理画面側：ブロックエディターfigure要素リセット用 */
.acms-admin-block-editor-image {
  @apply m-0;
}

/* 上下余白 */
/* stylelint-disable selector-class-pattern */
:where(.media-image-block),
:where(.prose) .node-imageBlock,
[class*='column-image'],
[class*='column-media']:not(:has(a[href*='media-download'], a[href*='storage'])),
[class*='column-eximage'] {
  @apply mt-(--unit-margin-top) mb-(--unit-margin-bottom);
}
/* stylelint-enable selector-class-pattern */

/* 画像ユニット：style属性でwidth指定された場合の横はみ出し防止 */
[class*='column-image'] {
  &[style*='width'] {
    @apply w-full;
  }
}

/* 共通設定
------------------------------ */
:where(.media-image-block),
:where(.acms-admin-block-editor-image),
[class*='column-image'],
[class*='column-media']:not(:has(a[href*='media-download'], a[href*='storage'])),
[class*='column-eximage'] {
  @apply leading-0;

  a {
    @apply inline-block no-underline transition-opacity duration-200 ease-in-out;
  }

  img {
    @apply my-0 inline-block max-w-full h-auto rounded-md;
  }
}

:where(.media-image-block),
:where(.acms-admin-block-editor-image) {
  @apply text-center;
}

/* キャプション
------------------------------ */
:where(.media-image-block) figcaption,
:where(.acms-admin-block-editor-image) figcaption,
[class*='column-image'] .caption,
[class*='column-media']:not(:has(a[href*='media-download'], a[href*='storage'])) .caption,
[class*='column-eximage'] .caption {
  @apply mt-3 mb-0 text-gray-500 text-sm;
}

[class*='column-image'] .caption,
[class*='column-media']:not(:has(a[href*='media-download'], a[href*='storage'])) .caption,
[class*='column-eximage'] .caption {
  @apply text-center;
}
