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

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

/* レイアウト */
:where(.#{global.$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(.#{global.$entry-class}) :where([data-type='columns']) {
  gap: var(--unit-gap-x);
}

/* メディアサイズ（v3.2.0 ~ v3.2.1 に保存されているブロックエディターのHTML対応）
----------------------------- */
:where([data-type='imageBlock']) {
  .media-width-25 {
    max-width: 25%;
  }

  .media-width-33 {
    max-width: 33%;
  }

  .media-width-50 {
    max-width: 50%;
  }

  .media-width-66 {
    max-width: 66%;
  }

  .media-width-75 {
    max-width: 75%;
  }

  .media-width-100 {
    max-width: 100%;
  }
}
