/**
 * Markdown Editor Bundle — agnostic styles
 * No Bootstrap, no Tailwind — uses CSS custom properties only.
 * Import adapters/bootstrap.css or adapters/tailwind.css for framework-specific overrides.
 */

/* ── EC holder (WYSIWYG inline widget) ─────────────────── */
.ec-holder {
    /*background: rgba(255, 165, 0, 0.15);*/
    /*border-bottom: 2px solid rgba(255, 165, 0, 0.5);*/
    border-radius: 2px;
    padding: 0 3px;
    cursor: help;
    transition: background 0.15s;
}

.ec-holder:hover {
    background: rgba(255, 165, 0, 0.35);
}

/* ── EC legacy classes (content_editor compat) ─────────── */
.ec-identifier-hidden {
    display: none;
}

.ec-text-highlighted {
    background: rgba(255, 165, 0, 0.2);
    border-radius: 2px;
    padding: 0 2px;
}

/* ── Special Area type variables ────────────────────────── */
.sa-type-info    { --sa-bg: rgba(13,202,240,.12); --sa-border: #0dcaf0; --sa-text: #087990; }
.sa-type-tip     { --sa-bg: rgba(25,135,84,.12);  --sa-border: #198754; --sa-text: #146c43; }
.sa-type-warning { --sa-bg: rgba(255,193,7,.12);  --sa-border: #ffc107; --sa-text: #997404; }
.sa-type-prerequisites { --sa-bg: rgba(220,53,69,.12); --sa-border: #dc3545; --sa-text: #b02a37; }
.sa-type-question      { --sa-bg: rgba(13,110,253,.12); --sa-border: #0d6efd; --sa-text: #0a58ca; }
.sa-type-primary   { --sa-bg: rgba(13,110,253,.10);  --sa-border: #0d6efd; --sa-text: #0a58ca; }
.sa-type-secondary { --sa-bg: rgba(108,117,125,.10); --sa-border: #6c757d; --sa-text: #565e64; }
.sa-type-success   { --sa-bg: rgba(25,135,84,.10);   --sa-border: #198754; --sa-text: #146c43; }
.sa-type-danger    { --sa-bg: rgba(220,53,69,.10);   --sa-border: #dc3545; --sa-text: #b02a37; }

/* ── SA WYSIWYG widgets ─────────────────────────────────── */
.sa-block-widget {
    display: block;
    background: var(--sa-bg, rgba(13,202,240,.12));
    border-left: 3px solid var(--sa-border, #0dcaf0);
    border-radius: 4px;
    padding: 6px 10px;
    margin: 4px 0;
    cursor: default;
    user-select: none;
}

.sa-block-widget .sa-widget-header {
    color: var(--sa-text, #087990);
    font-weight: 600;
    margin-right: 8px;
    font-size: 0.85em;
}

.sa-block-widget .sa-widget-header i {
    margin-right: 4px;
}

.sa-block-widget .sa-widget-content {
    display: block;
    margin-top: 4px;
}

.sa-multiline-open {
    display: block;
    background: var(--sa-bg, rgba(13,202,240,.12));
    border-left: 3px solid var(--sa-border, #0dcaf0);
    border-top: 1px solid var(--sa-border, #0dcaf0);
    border-right: 1px solid var(--sa-border, #0dcaf0);
    border-radius: 4px 4px 0 0;
    padding: 6px 10px;
    margin-top: 4px;
    color: var(--sa-text, #087990);
    font-weight: 600;
    font-size: 0.85em;
    cursor: default;
    user-select: none;
}

.sa-multiline-open i {
    margin-right: 4px;
}

.sa-multiline-close {
    display: block;
    background: var(--sa-bg, rgba(13,202,240,.12));
    border-left: 3px solid var(--sa-border, #0dcaf0);
    border-bottom: 1px solid var(--sa-border, #0dcaf0);
    border-right: 1px solid var(--sa-border, #0dcaf0);
    border-radius: 0 0 4px 4px;
    padding: 3px 10px;
    margin-bottom: 4px;
    height: 8px;
    cursor: default;
    user-select: none;
}

.sa-inline-widget {
    display: inline;
    background: var(--sa-bg, rgba(13,202,240,.12));
    border: 1px solid var(--sa-border, #0dcaf0);
    border-radius: 4px;
    padding: 1px 5px;
    cursor: default;
    user-select: none;
}

/* ── Dark mode ──────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    .sa-type-info         { --sa-bg: rgba(13,202,240,.08); --sa-border: #0dcaf0; --sa-text: #3dd5f3; }
    .sa-type-tip          { --sa-bg: rgba(25,135,84,.08);  --sa-border: #198754; --sa-text: #75b798; }
    .sa-type-warning      { --sa-bg: rgba(255,193,7,.08);  --sa-border: #ffc107; --sa-text: #ffda6a; }
    .sa-type-prerequisites { --sa-bg: rgba(220,53,69,.08); --sa-border: #dc3545; --sa-text: #ea868f; }
    .sa-type-question     { --sa-bg: rgba(13,110,253,.08); --sa-border: #0d6efd; --sa-text: #6ea8fe; }
    .sa-type-primary      { --sa-bg: rgba(13,110,253,.08); --sa-border: #0d6efd; --sa-text: #6ea8fe; }
    .sa-type-secondary    { --sa-bg: rgba(108,117,125,.08); --sa-border: #6c757d; --sa-text: #a7acb1; }
    .sa-type-success      { --sa-bg: rgba(25,135,84,.08);  --sa-border: #198754; --sa-text: #75b798; }
    .sa-type-danger       { --sa-bg: rgba(220,53,69,.08);  --sa-border: #dc3545; --sa-text: #ea868f; }
}

/* ── Editor panel base ──────────────────────────────────── */
.editor-panel-editor {
    position: relative;
}

/* ── Toolbar custom buttons (vertical centering) ────────── */
.toastui-editor-toolbar-item-wrapper > span {
    display: inline-flex;
    align-items: center;
    height: 100%;
}