/**
 * Simple Decoration - Final Admin & Preview Styles (Robust Version)
 */

/* 記事側（フロントエンド）共通 */
.has-simple-decoration-gradient {
    display: inline-block !important;
    width: fit-content !important;
    /* 文章の長さに合わせる */
    background-clip: text !important;
    -webkit-background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

/* ==========================================================================
   エディター (Gutenberg) 内の強制反映
   ========================================================================== */
/* ブロックのラッパーに付いたクラスを元に、中身の編集領域を装飾する */
.is-simple-grad-active {
    /* ラッパー自体を縮めない（左寄りの原因） */
    display: block !important;
    width: 100% !important;
}

.is-simple-grad-active .block-editor-rich-text__editable,
.is-simple-grad-active [contenteditable="true"],
.is-simple-grad-active span,
.is-simple-grad-active * {
    display: inline-block !important;
    /* 文章をグラデーションの基準にする */
    width: fit-content !important;
    background-image: var(--simple-grad-val) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    box-decoration-break: clone !important;
    -webkit-box-decoration-break: clone !important;
}

/* シャドウの反映 */
.is-simple-shadow-active .block-editor-rich-text__editable,
.is-simple-shadow-active [contenteditable="true"],
.is-simple-shadow-active span,
.is-simple-shadow-active * {
    filter: drop-shadow(var(--simple-shadow-val)) !important;
}

/* 縁取りの反映 */
.is-simple-border-active .block-editor-rich-text__editable,
.is-simple-border-active [contenteditable="true"],
.is-simple-border-active span,
.is-simple-border-active * {
    text-shadow: var(--simple-border-val) !important;
}

/* ==========================================================================
   管理画面サイドバーのUI調整 (はみ出し防止)
   ========================================================================== */
.simple-swell-like-ui {
    padding: 12px;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    margin-top: 10px;
    box-sizing: border-box;
    width: 100%;
    /* 親を突き抜けない */
    overflow: hidden;
}

/* プレビューバー */
.simple-grad-preview-bar {
    height: 30px;
    width: 100%;
    border-radius: 4px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* カラーパレットのはみ出しを物理的に防ぐ */
.simple-swell-like-ui .components-color-palette {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 10px !important;
}

.simple-swell-like-ui .components-color-palette__item {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
}

/* フォーム要素の幅調整 */
.simple-swell-like-ui .components-range-control__number {
    width: 45px !important;
    min-width: 45px !important;
}