/**
 * Variable
 */
:root {
    --editor-block-background: #012022;
    --editor-block-color: #fff;
    --editor-border: #01202233;
    --editor-button-background: #012022;
    --editor-button-color: #fff;
    --editor-cancel-background: #e3e7e7;
    --editor-cancel-color: #012022;
    --editor-dialog-backdrop: #000000cc;
    --editor-dialog-background: #fff;
    --editor-dialog-color: #012022;
    --editor-error: #cc2e2c;
    --editor-focus: #fcece1;
    --editor-placeholder: #01202233;
    --editor-slot: #09575c;
    --editor-sortover: #012022;
    --editor-toolbar-background: #fff;
    --editor-toolbar-color: #012022;
    --editor-text-block: 'Block: ' attr(id);
    --editor-text-editable: 'Gimme some text!';
    --editor-text-root: 'Gimme some widgets!';
    --editor-text-slot: 'Focus this slot and gimme some widgets!';
    --editor-text-tablecol: 'Col ';
    --editor-text-tablebodyrow: 'Row ';
    --editor-text-tablefootrow: 'Foot ';
    --editor-text-tableheadrow: 'Head ';
}

akilli-editor[lang=de] {
    --editor-text-editable: 'Gib mir Text!';
    --editor-text-root: 'Gib mir Widgets!';
    --editor-text-slot: 'Fokussiere diesen Slot und gib mir Widgets!';
    --editor-text-tablecol: 'Spalte ';
    --editor-text-tablebodyrow: 'Zeile ';
    --editor-text-tablefootrow: 'Fuß ';
    --editor-text-tableheadrow: 'Kopf ';
}

/**
 * Font
 */
@font-face {
    font-family: editor;
    font-display: block;
    font-style: normal;
    font-weight: 900;
    src: url(editor.woff2) format('woff2');
}

/**
 * Editor
 */
akilli-editor {
    position: relative;
    display: block;
}

akilli-editor [hidden] {
    display: none;
}

/**
 * Editor Root
 */
akilli-editor editor-root {
    display: block;
    width: 100%;
    padding: 0.75rem 0.6875rem 0.6875rem;
    overflow: auto;
    border: 0.0625rem solid var(--editor-border);
    border-top: 0;
}

akilli-editor editor-root:empty::after {
    color: var(--editor-placeholder);
    content: var(--editor-text-root);
}

/**
 * Widgets
 */
akilli-editor editor-root :focus {
    outline: 0.25rem dashed var(--editor-focus);
}

/**
 * Editable
 */
akilli-editor editor-root [contenteditable] {
    min-height: 1.5rem;
}

akilli-editor editor-root [contenteditable=true]:empty::after {
    color: var(--editor-placeholder);
    content: var(--editor-text-editable);
}

akilli-editor editor-root :is(td, th)[contenteditable] {
    height: 1.5rem;
}

akilli-editor editor-root slot[contenteditable] {
    display: block;
    padding: 0.25rem;
    clear: both;
    border: 0.25rem solid var(--editor-slot);
}

akilli-editor editor-root slot[contenteditable=true]:empty::after {
    color: var(--editor-slot);
    content: var(--editor-text-slot);
}

akilli-editor editor-root [contenteditable=true] :hover {
    cursor: context-menu;
}

/**
 * Sortable
 */
akilli-editor editor-root [data-sortable][data-sort]:hover {
    cursor: grab;
}

akilli-editor editor-root :is([data-sortover], [contenteditable][data-sortover]) {
    outline: 0.25rem dashed var(--editor-sortover);
}

/**
 * Container
 */
akilli-editor editor-root :is(details, div, section) {
    overflow: auto;
}

/**
 * Media
 */
akilli-editor editor-root :is(audio, iframe, img, video) {
    pointer-events: none;
}

/**
 * Table
 */
akilli-editor editor-root :is(thead, tbody, tfoot) {
    counter-reset: rows;
}

akilli-editor editor-root colgroup {
    display: table-header-group;
    counter-reset: cols;
}

akilli-editor editor-root col,
akilli-editor editor-root :is(colgroup, tr)::before {
    display: table-cell;
    height: 1.5rem;
    line-height: 1.5rem;
    vertical-align: middle;
    text-align: center;
    color: var(--editor-placeholder);
}

akilli-editor editor-root col::after {
    counter-increment: cols;
    content: var(--editor-text-tablecol) counter(cols);
}

akilli-editor editor-root colgroup::before {
    content: ' ';
}

akilli-editor editor-root tr::before {
    counter-increment: rows;
    content: var(--editor-text-tablebodyrow) counter(rows);
}

akilli-editor editor-root thead tr::before {
    content: var(--editor-text-tableheadrow) counter(rows);
}

akilli-editor editor-root tfoot tr::before {
    content: var(--editor-text-tablefootrow) counter(rows);
}

akilli-editor editor-root col:focus,
akilli-editor editor-root tr:focus::before {
    background: var(--editor-focus);
}

/**
 * Details
 */
akilli-editor editor-root summary {
    white-space: pre-wrap;
}

/**
 * Block
 */
akilli-editor editor-root app-block {
    display: block;
    padding: 0.25rem;
    border: 0.0625rem solid var(--editor-block-background);
}

akilli-editor editor-root app-block::before {
    display: block;
    margin: -0.25rem -0.25rem 0.5rem;
    padding: 0.125rem 0.25rem;
    color: var(--editor-block-color);
    background: var(--editor-block-background);
    content: var(--editor-text-block);
}

/**
 * Dialog
 */
akilli-editor dialog::backdrop {
    background: var(--editor-dialog-backdrop);
}

akilli-editor dialog form {
    padding: 0.75rem;
    color: var(--editor-dialog-color);
    background: var(--editor-dialog-background);
}

akilli-editor dialog :is(form, fieldset) > :not(:first-child) {
    margin-top: 1.5rem;
}

akilli-editor dialog legend {
    font-size: 1.25rem;
}

akilli-editor dialog label {
    display: block;
}

akilli-editor dialog [data-required] label::after {
    content: ' *';
}

akilli-editor dialog button {
    padding: 0.75rem;
    color: var(--editor-button-color);
    background: var(--editor-button-background);
}

akilli-editor dialog button + button {
    margin-left: 1.5rem;
}

akilli-editor dialog button[type=reset] {
    color: var(--editor-cancel-color);
    background: var(--editor-cancel-background);
}

akilli-editor dialog input:is(
    [type=email],
    [type=number],
    [type=password],
    [type=search],
    [type=tel],
    [type=text],
    [type=url]
),
akilli-editor dialog select {
    width: 100%;
    padding: 0.71875rem 0;
    border-bottom: 0.0625rem solid var(--editor-border);
}

akilli-editor dialog input:is(
    [type=email],
    [type=number],
    [type=password],
    [type=search],
    [type=tel],
    [type=text],
    [type=url]
):invalid,
akilli-editor dialog select:invalid {
    border-color: var(--editor-error);
}

/**
 * Toolbar
 */
akilli-editor editor-toolbar {
    position: sticky;
    top: 0;
    display: flex;
    flex-wrap: wrap;
    color: var(--editor-toolbar-color);
    background: var(--editor-toolbar-background);
    border: 0.0625rem solid var(--editor-border);
}

akilli-editor :is(editor-focusbar, editor-formatbar) {
    position: absolute;
    left: 0;
    display: flex;
    flex-wrap: wrap;
    color: var(--editor-toolbar-color);
    background: var(--editor-toolbar-background);
    border: 0.0625rem solid var(--editor-border);
}

akilli-editor editor-focusbar:empty,
akilli-editor editor-focusbar [data-command] {
    display: none;
}

akilli-editor editor-focusbar[data-alignable] [data-command^=align-],
akilli-editor editor-focusbar[data-deletable] [data-command=delete],
akilli-editor editor-focusbar[data-sortable] [data-command^=sort-],
akilli-editor editor-focusbar[data-tag=col] [data-command^=tablecolumn-],
akilli-editor editor-focusbar[data-tag=tr] [data-command^=tablerow-] {
    display: inline-block;
}

/**
 * Buttons
 */
akilli-editor [data-command] {
    display: inline-block;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    font-family: editor;
    font-size: 0;
}

akilli-editor [data-command]:focus {
    color: var(--editor-focus);
}

akilli-editor [data-command]::before {
    font-size: 1.5rem;
}

akilli-editor [data-command=abbreviation]::before {
    content: '\e800';
}

akilli-editor [data-command=align-center]::before {
    content: '\e801';
}

akilli-editor [data-command=align-left]::before {
    content: '\e802';
}

akilli-editor [data-command=align-none]::before {
    content: '\e803';
}

akilli-editor [data-command=align-right]::before {
    content: '\e804';
}

akilli-editor [data-command=audio]::before {
    content: '\e805';
}

akilli-editor [data-command=block]::before {
    content: '\e806';
}

akilli-editor [data-command=blockquote]::before {
    content: '\e807';
}

akilli-editor [data-command=bold]::before {
    content: '\e808';
}

akilli-editor [data-command=cite]::before {
    content: '\e809';
}

akilli-editor [data-command=code]::before {
    content: '\e80a';
}

akilli-editor [data-command=data]::before {
    content: '\e80b';
}

akilli-editor [data-command=definition]::before {
    content: '\e80c';
}

akilli-editor [data-command=delete]::before {
    content: '\e80d';
}

akilli-editor [data-command=deletion]::before {
    content: '\e80e';
}

akilli-editor [data-command=details]::before {
    content: '\e80f';
}

akilli-editor [data-command=division]::before {
    content: '\e810';
}

akilli-editor [data-command=emphasis]::before {
    content: '\e811';
}

akilli-editor [data-command=heading]::before {
    content: '\e812';
}

akilli-editor [data-command=horizontalrule]::before {
    content: '\e813';
}

akilli-editor [data-command=iframe]::before {
    content: '\e814';
}

akilli-editor [data-command=image]::before {
    content: '\e815';
}

akilli-editor [data-command=insertion]::before {
    content: '\e816';
}

akilli-editor [data-command=italic]::before {
    content: '\e817';
}

akilli-editor [data-command=keyboard]::before {
    content: '\e818';
}

akilli-editor [data-command=link]::before {
    content: '\e819';
}

akilli-editor [data-command=mark]::before {
    content: '\e81a';
}

akilli-editor [data-command=orderedlist]::before {
    content: '\e81b';
}

akilli-editor [data-command=paragraph]::before {
    content: '\e81c';
}

akilli-editor [data-command=preformat]::before {
    content: '\e81d';
}

akilli-editor [data-command=quote]::before {
    content: '\e81e';
}

akilli-editor [data-command=sample]::before {
    content: '\e81f';
}

akilli-editor [data-command=section]::before {
    content: '\e820';
}

akilli-editor [data-command=small]::before {
    content: '\e821';
}

akilli-editor [data-command=sort-first]::before {
    content: '\e822';
}

akilli-editor [data-command=sort-last]::before {
    content: '\e823';
}

akilli-editor [data-command=sort-next]::before {
    content: '\e824';
}

akilli-editor [data-command=sort-prev]::before {
    content: '\e825';
}

akilli-editor [data-command=strikethrough]::before {
    content: '\e826';
}

akilli-editor [data-command=strong]::before {
    content: '\e827';
}

akilli-editor [data-command=subheading]::before {
    content: '\e828';
}

akilli-editor [data-command=subscript]::before {
    content: '\e829';
}

akilli-editor [data-command=superscript]::before {
    content: '\e82a';
}

akilli-editor [data-command=table]::before {
    content: '\e82b';
}

akilli-editor [data-command=tablecolumn-add]::before {
    content: '\e82c';
}

akilli-editor [data-command=tablerow-add]::before {
    content: '\e82d';
}

akilli-editor [data-command=time]::before {
    content: '\e82e';
}

akilli-editor [data-command=underline]::before {
    content: '\e82f';
}

akilli-editor [data-command=unorderedlist]::before {
    content: '\e830';
}

akilli-editor [data-command=variable]::before {
    content: '\e831';
}

akilli-editor [data-command=video]::before {
    content: '\e832';
}