@use "../global/acms-common" as acms;

/* ------------------------------
 ベーススタイル
------------------------------ */

.#{acms.$entry-class} {
  // グリッドのカラム間余白を設定
  .acms-cssgrid {
    --acms-gap: var(--unit-gap-x);
  }

  // スタックの余白を設定
  .acms-stack,
  .acms-vstack,
  .acms-hstack {
    --acms-stack-spacing: var(--unit-gap-x);
  }
}

// ユニット全体のレイアウト
.#{acms.$entry-class} {
  /* コンテンツの初めの要素には上余白をつけない */
  & > *:first-child,
  & > *:first-child.column-block-editor > *:first-child, // ブロックエディター内
  & > *:first-child.js-edit_inplace > *:first-child, //ダイレクト編集時
  & > *:first-child.js-edit_inplace-hovering + .js-edit_inplace > *:first-child //ダイレクト編集時にホバー
  {
    margin-block-start: 0;
  }
}

:where(.#{acms.$entry-class}) {
  img,
  video {
    max-width: 100%;
    height: auto;
  }

  audio,
  canvas,
  embed,
  iframe,
  object,
  svg,
  video {
    display: block;
    vertical-align: middle;
  }
}
