@use '../../global/common' as global;

/* ------------------------------
 - ブロックエディターのファイル（縦積み）
 - メディアファイル
 - ファイル
 ※ media-downloadは動的、storageは静的書き出しに対応
------------------------------ */

:where(.#{global.$entry-class}) [data-type='fileBlock'][data-display-type='icon'],
:where(.#{global.$entry-class}) [class*='column-media']:has(a[href*='media-download'], a[href*='storage']),
:where(.#{global.$entry-class}) [class*='column-file'] {
  margin-block: var(--unit-margin-top) var(--unit-margin-bottom);
  font-size: 0; /* Descender space 対策 */
  text-align: center;
}

/* ファイルアイコン */
:where(.#{global.$entry-class}) [data-type='fileBlock'][data-display-type='icon'] img,
:where(.#{global.$entry-class}) [class*='column-media'] .columnIcon,
:where(.#{global.$entry-class}) [class*='column-file'] .columnIcon {
  display: inline-block;
  width: 56px;
  max-width: 100%;
  height: auto;
}

/* キャプション */
:where(.#{global.$entry-class}) [data-type='fileBlock'][data-display-type='icon'] .caption,
:where(.#{global.$entry-class}) [class*='column-media']:has(a[href*='media-download'], a[href*='storage']) .caption,
:where(.#{global.$entry-class}) [class*='column-file'] .caption {
  display: block;
  margin: 4px 0 0; /* 余白リセットのため全方向指定 */
  line-height: 1.5;

  @include global.font-size(12);
}

/* リンク（閲覧画面のみ） */
:where(.#{global.$entry-class}) [data-type='fileBlock'][data-display-type='icon'] a,
:where(.#{global.$entry-class}) [class*='column-media'] a[href*='media-download'],
:where(.#{global.$entry-class}) [class*='column-media'] a[href*='storage'],
:where(.#{global.$entry-class}) [class*='column-file'] a {
  display: inline-block;
  text-decoration: none; /* リセット用 */

  @media (any-hover: hover) {
    transition: opacity 0.2s ease;

    &:where(:any-link):hover {
      opacity: 0.7;
    }
  }
}

/* PDFプレビュー
------------------------------ */
:where(.#{global.$entry-class}) [class*='column-media'] .column-pdf-image {
  max-width: 100%;
  border: solid 1px global.$acms-color-gray70;
}
