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

/* レイアウト */
:where(.prose) :where([data-type='columns']) {
  @apply grid grid-flow-col box-border mt-(--unit-margin-top) mb-(--unit-margin-bottom) gap-(--unit-gap-x);

  /* 2カラム */
  &.layout-two-column {
    @apply grid-cols-2;
  }

  /* 3カラム */
  &.layout-three-column {
    @apply grid-cols-3;
  }
}

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

/* カラム上下余白
/* 編集画面でのブロックエディターでのカラム上下余白親要素でとるため、
/* 子要素の最初と最後の上下マージンをリセット
/* 上書きのため詳細度高め（0,0,2,0）
----------------------------- */
:where(.prose) {
  [data-type='column'] > * {
    &:first-child {
      @apply mt-0;
    }

    &:last-child {
      @apply mb-0;
    }
  }
}

/* メディアサイズ
----------------------------- */
:where(.media-image-block) {
  figure {
    /* リセット用 */
    @apply m-0;
  }

  .media-width-25 {
    @apply max-w-1/4;
  }

  .media-width-33 {
    @apply max-w-1/3;
  }

  .media-width-50 {
    @apply max-w-1/2;
  }

  .media-width-66 {
    @apply max-w-2/3;
  }

  .media-width-75 {
    @apply max-w-3/4;
  }

  .media-width-100 {
    @apply max-w-full;
  }
}
