.cm-circle-separator {
    display: inline-block;
    font-size: 0 !important; /* Hide the bullet character */
    width: clamp(14px, .9vw, 85px) !important;  /* Responsive width based on viewport width */
    height: clamp(14px, .9vw, 85px) !important; /* Same as width to create a circle */
    background-color: #c82e2e; /* Default red color, can be overridden */
    border-radius: 50% !important; /* Makes it a circle */
    margin: 0 0.5vw !important; /* Responsive margin on left and right */
    vertical-align: middle !important; /* Aligns with the middle of the text */
    position: relative !important;
    text-indent: -9999px !important; /* Hide any content */
    line-height: 0 !important;
    color: transparent !important; /* Make the bullet character invisible */
    overflow: hidden !important; /* Ensure nothing shows outside the circle */
}

/* Make sure the separator is properly displayed inline within text */
.wp-block-paragraph .cm-circle-separator,
.wp-block-heading .cm-circle-separator,
.wp-block-list-item .cm-circle-separator {
    display: inline-block;
    vertical-align: middle;
}

/* Editor styles to ensure the separator is visible and properly sized */
.block-editor-block-list__block .cm-circle-separator {
    display: inline-block !important;
    vertical-align: middle !important;
    min-width: 14px;
    min-height: 14px;
}

/* Override any character content within the separator */
.cm-circle-separator::before {
    content: "";
    display: none;
}

/* Make sure when used as a format it works properly */
span.cm-circle-separator {
    color: transparent !important;
    text-shadow: none !important;
    font-size: 0 !important;
    content: "" !important;
}

/* Add a ::before pseudo-element to hide any content */
span.cm-circle-separator::before,
span.cm-circle-separator::after {
    content: "" !important;
    display: none !important;
}

/* Make color dropdown visible in the FSE environment */
.cm-separator-color-dropdown-content {
    min-width: 200px;
    z-index: 999999 !important;
}

/* Style color indicators in dropdown */
.cm-separator-color-dropdown .components-color-indicator {
    margin-right: 8px;
    margin-bottom: 0;
    width: 20px;
    height: 20px;
}

/* Remove vertical padding from dropdown menu items */
.cm-separator-color-dropdown .components-menu-item__button {
    padding-top: 6px;
    padding-bottom: 6px;
}

/* Position the dropdown properly */
.cm-separator-color-dropdown .components-popover__content {
    min-width: 200px !important;
    z-index: 999999 !important;
}