/* CSS for Reactor reaction editor (embeddable) */
/* Version 24307 */
/* Color family: Indigo 50 https://material.io/design/color/the-color-system.html#tools-for-picking-colors */

.re-reaction-editor div.re-actions-header {
    background-color: #303f9f;
    color: var(--bs-white);
    border-radius: 8px;
    min-height: 2.5rem;
    padding: 2px 0;
}

.re-reaction-editor div.actionrow {
    border: 1px solid #303f9f;
    border-left: 4px solid #303f9f;
    border-radius: 8px;
    background-color: var(--re-rule-editor-level0-bg);
    padding: 8px;
}

/* Placeholder (target position) when action is dragged; like empty actionrow */
.re-reaction-editor div.re-insertionpt {
    border: 2px dotted var(--bs-body-color);
    border-radius: 8px;
    background-color: var(--re-rule-editor-level0-bg);
    min-height: 48px;
}
/* Helper shown when dragging action */
.re-reaction-editor .ui-sortable-helper {
    width: 128px !important;
    height: 32px !important;
    background: rgba(0,0,0,0);
    background: radial-gradient(circle, rgba(0,0,255,0.67) 0%, rgba(0,0,128,0.5) 25%, rgba(255,255,255,0) 50%);
    border: 2px dotted var(--bs-body-color);
    border-radius: 8px;
}

.re-reaction-editor div.actionrow.tbmodified:not(.tberror) { border-left: 4px solid var(--bs-success) !important; }
.re-reaction-editor div.actionrow.tberror { border-left: 4px solid var(--bs-danger) !important; }
.re-reaction-editor div.buttonrow { padding: 8px; }
.re-reaction-editor input.re-comment { width: 100% !important; }
.re-reaction-editor textarea.argument { width: 100% !important; resize: vertical; height: auto; }
.re-reaction-editor textarea.argument.code { font-family: monospace; }
.re-reaction-editor select.re-actionmenu { }
.re-reaction-editor textarea.re-extra-url { resize: both; }
.re-reaction-editor textarea.re-reqfield { font-family: monospace; resize: vertical; height: auto; width: 100% !important; white-space: nowrap; }
.re-reaction-editor textarea.re-script-expr { font-family: monospace; resize: vertical; height: auto; width: 100% !important; white-space: nowrap; }
.re-reaction-editor button.re-activemode { color: var(--bs-success); }
.re-reaction-editor select.re-actiontype { min-width: 8rem; }
.re-reaction-editor select.re-variable { min-width: 8rem; }
.re-reaction-editor div.XXXaction-group-container { margin-left: 4px; margin-right: 4px; }
.re-reaction-editor div.action-group { min-height: 24px; padding: 1px 0; }  /* top padding helps sortable at top of list */
.re-reaction-editor div.editor-group { }

.re-reaction-editor .dropdown { list-style: none;  display: inline-block; }
.re-reaction-editor .dropdown .dropdown-header { font-size: 0.9rem; font-weight: 600; padding: 4px 4px; display: inline-block; }
.re-reaction-editor .dropdown .dropdown-menu a {}
.re-reaction-editor .dropdown .dropdown-menu a:hover {}
.re-reaction-editor .dropdown .dropdown-item { font-size: 0.9rem; font-weight: normal; display: inline-block; width: 100%; padding: 2px 2px 2px 20px; }

.re-reaction-editor div#importReaction ul.dropdown-menu { max-height: 50vh; overflow-y: auto; }

.re-reaction-editor div.re-action-warning {
    background-color: var(--bs-body-bg);
    border: 2px solid var(--bs-warning);
    border-radius: 4px;
    margin-top: 8px;
    padding: 4px 8px;
}
.re-reaction-editor div.re-action-notice {
    background-color: var(--bs-body-bg);
    border: 2px solid var(--bs-info);
    border-radius: 4px;
    margin-top: 8px;
    padding: 4px 8px;
}

.re-reaction-editor div.re-script-err {
    font-family: var(--bs-font-monospace) !important;
    white-space: pre-wrap;
    width: 100%;
    background-color: var(--bs-danger-bg-subtle);
    border: 1px solid var(--bs-danger);
    border-radius: 4px;
    margin-top: 8px;
    padding: 4px 8px;
}
