/**
 * CM Tiles Block - Centralized Styles
 * 
 * This file serves as a reference point for the block.
 * Actual styling is handled by the cm-tiles plugin CSS files which have been
 * updated with the three-selector pattern to support FSE.
 * 
 * The plugin's CSS files (layout_common.css, layout_1.css, layout_2.css, layout_3.css)
 * contain all the necessary styling with the proper selectors:
 * - .editor-styles-wrapper .wp-block-w4ya-cm-tiles .{class}
 * - .wp-block-w4ya-cm-tiles .{class}
 * - .{class}
 */

/* Block wrapper styles - SSOT Two-Selector Pattern */
.editor-styles-wrapper .wp-block-w4ya-cm-tiles,
.wp-block-w4ya-cm-tiles {
    display: block;
    width: 100%;
    position: relative;
    clear: both;
}

/* FSE Editor-specific positioning - now both blocks use ServerSideRender consistently */
.block-editor-block-list__layout .wp-block-w4ya-cm-tiles {
    position: relative;
}
 
.editor-styles-wrapper .wp-block-w4ya-cm-tiles .cm-available-tags-section,
.wp-block-w4ya-cm-tiles .cm-available-tags-section,
.cm-available-tags-section {
    /* display controlled by JavaScript - hidden by default, shown on comma input */
    margin-top: 8px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 3px;
    background: #f9f9f9;
    max-height: 200px;
    overflow-y: auto;
    position: relative;
    z-index: 1000;
    width: 100%;
    box-sizing: border-box;
}

.editor-styles-wrapper .wp-block-w4ya-cm-tiles .cm-tag-chips-container,
.wp-block-w4ya-cm-tiles .cm-tag-chips-container,
.cm-tag-chips-container {
    min-height: 40px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 3px;
    background: #e9f0ea;
    
}

.editor-styles-wrapper .wp-block-w4ya-cm-tiles .cm-tag-input-field,
.wp-block-w4ya-cm-tiles .cm-tag-input-field,
.cm-tag-input-field {
    width: 100%;
    border: none;
    outline: none;
    padding: 4px;
    font-size: 14px;
}

.editor-styles-wrapper .wp-block-w4ya-cm-tiles .cm-available-tags-header,
.wp-block-w4ya-cm-tiles .cm-available-tags-header,
.cm-available-tags-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.editor-styles-wrapper .wp-block-w4ya-cm-tiles .cm-available-tags-close,
.wp-block-w4ya-cm-tiles .cm-available-tags-close,
.cm-available-tags-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    padding: 0;
    line-height: 1;
}

.editor-styles-wrapper .wp-block-w4ya-cm-tiles .cm-no-tags-message,
.wp-block-w4ya-cm-tiles .cm-no-tags-message,
.cm-no-tags-message {
    color: #666;
    font-size: 14px;
}