@use "sass:map";
@use "../global/acms-common" as acms;
@use "../global/common" as global;

/* ------------------------------
 ブロックエディター内要素のレイアウト
------------------------------ */

/* レイアウト */
:where(.#{acms.$entry-class}) :where([data-type="columns"]) {
  box-sizing: border-box;
  display: grid;
  grid-auto-flow: column;

  // 2カラム
  &.layout-two-column {
    grid-template-columns: repeat(2, 1fr);
  }

  // 3カラム
  &.layout-three-column {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 管理画面側 */
:where(.acms-admin-block-editor) :where([data-type="columns"]) {
  gap: 1rem !important; // 管理画面では余白が広くなりすぎないよう固定値を指定
}

/* 閲覧画面側 */
:where(.#{acms.$entry-class}) :where([data-type="columns"]) {
  gap: var(--unit-gap-x);
}
