/*
 * =========================================================
 * フクブル自由DIV
 * Gutenberg 編集画面用CSS
 * =========================================================
 */


/*
 * ---------------------------------------------------------
 * 自由DIV本体
 * ---------------------------------------------------------
 *
 * position はここでは指定しません。
 *
 * relative / absolute などの位置指定は
 * fukubull-free-div.js の block attributes / style に任せます。
 *
 * CSS側で position:relative を指定すると、
 * absolute に設定した自由DIVまで relative に変わってしまい、
 * 公開画面との位置ズレの原因になります。
 */
.wp-block-fukubull-free-div.fukubull-free-div-editor {
    min-height: 42px;
    outline: 1px dashed rgba(0, 0, 0, 0.18);
    box-sizing: border-box;
}


/*
 * ---------------------------------------------------------
 * マウスを乗せたときの枠線
 * ---------------------------------------------------------
 */
.wp-block-fukubull-free-div.fukubull-free-div-editor:hover {
    outline-color: rgba(232, 117, 17, 0.75);
}


/*
 * ---------------------------------------------------------
 * 「自由DIV」ラベル
 * ---------------------------------------------------------
 */
.fukubull-free-div-editor-label {
    position: absolute;
    top: 2px;
    right: 4px;
    z-index: 20;

    padding: 2px 6px;

    border-radius: 3px;

    background: rgba(0, 0, 0, 0.06);

    font-size: 10px;
    line-height: 1.3;

    pointer-events: none;
}


/*
 * ---------------------------------------------------------
 * 色設定
 * ---------------------------------------------------------
 */
.fukubull-free-div-color-control {
    margin-bottom: 18px;
}

.fukubull-free-div-control-label {
    margin-bottom: 8px;

    font-size: 11px;
    font-weight: 600;
}


/*
 * =========================================================
 * Gutenberg 編集画面専用ラッパー対策
 * =========================================================
 *
 * Gutenbergでは InnerBlocks の中に、
 *
 * .block-editor-inner-blocks
 *
 * .block-editor-block-list__layout
 *
 * という編集画面専用のラッパーが追加されます。
 *
 * これらが通常のDIVとしてレイアウトに参加すると、
 * position:absolute の基準位置が公開画面と異なってしまいます。
 *
 * display:contents にすることで、
 * レイアウト上はこのラッパーが存在しない状態にします。
 *
 * これにより、
 *
 * 親自由DIV
 *   ↓
 * 子自由DIV（absolute）
 *
 * という公開画面とほぼ同じ位置関係になります。
 */
.wp-block-fukubull-free-div.fukubull-free-div-editor
> .block-editor-inner-blocks,

.wp-block-fukubull-free-div.fukubull-free-div-editor
> .block-editor-inner-blocks
> .block-editor-block-list__layout {
    display: contents;
}


/*
 * =========================================================
 * Gutenberg ブロック余白対策
 * =========================================================
 *
 * Gutenbergがブロックに自動的に付ける
 * margin-block-start / margin-block-end によって
 * absolute配置がずれないようにします。
 */
.wp-block-fukubull-free-div.fukubull-free-div-editor[data-type="fukubull/free-div"] {
    margin-block-start: 0;
    margin-block-end: 0;
}


/*
 * =========================================================
 * InnerBlocks 内の自由DIV
 * =========================================================
 *
 * Gutenberg側から不要なマージンが入らないようにします。
 *
 * position / top / left / right / bottom は変更しません。
 * JS側で設定された値をそのまま使用します。
 */
.wp-block-fukubull-free-div.fukubull-free-div-editor
.wp-block-fukubull-free-div {
    margin-top: 0;
    margin-bottom: 0;
}


/*
 * =========================================================
 * 画像ブロック対策
 * =========================================================
 *
 * Gutenberg編集画面では画像ブロックに
 * margin-block-start / margin-block-end が入る場合があります。
 *
 * 自由DIVの中では公開画面との位置差を小さくするため
 * 上下の自動マージンを解除します。
 */
.wp-block-fukubull-free-div.fukubull-free-div-editor
.wp-block-image {
    margin-block-start: 0;
    margin-block-end: 0;
}


/*
 * 画像そのもの
 *
 * Gutenberg側の余計な vertical-align による
 * 数pxの隙間を防止します。
 */
.wp-block-fukubull-free-div.fukubull-free-div-editor
.wp-block-image img {
    display: block;
}


/*
 * =========================================================
 * Gutenberg選択用UI対策
 * =========================================================
 *
 * ブロック選択用UIが自由DIVの位置計算へ
 * 影響しないようにします。
 */
.wp-block-fukubull-free-div.fukubull-free-div-editor
.block-list-appender {
    margin: 0;
}


/*
 * =========================================================
 * 重要
 * =========================================================
 *
 * 以下は意図的に指定していません。
 *
 * position
 * top
 * right
 * bottom
 * left
 * width
 * height
 * transform
 *
 * これらは fukubull-free-div.js で設定した値を
 * 編集画面でもそのまま使用するためです。
 *
 * 特に position:relative !important;
 * position:absolute !important;
 * などは追加しないでください。
 */