/* Skyco15 Editor UI */

:root {
    --editor-select-color: #1e90ff;
    --editor-frame-color: #0092bfa7;
}

/* Editor Elements */
.editor-element:hover::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--font-color);
    opacity: .1;
}

/* Editor Tags */
sky-sheet {
    --font-color: black;
    --color-background: white;
    /* display: block; */
    display: flex;
    flex-direction: column;
    width: var(--sheet-width,210mm);
    height: var(--sheet-height,297mm);
    min-height: 10mm;
    background-color: var(--color-background);
    overflow: hidden;
    z-index: 0;
}
sky-personalise {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}


/* Editor */
sky-editor {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: auto !important;
    overscroll-behavior: contain;
    z-index: 0;
}
sky-editor.safe-scroll-x, sky-editor.scaled {
    align-items: start !important;
}
sky-editor.safe-scroll-y, sky-editor.scaled {
    justify-content: start !important;
}

/* Canvas */
sky-editor-canvas {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: var(--editor-canvas-width,auto);
    height: var(--editor-canvas-height,auto);
    background-color: var(--color-background);
    flex-shrink: 0;
    flex-grow: 0;
    overflow: hidden;
    z-index: 0;
    transform-origin: top left;
}
sky-editor-canvas:empty {
    width: 250px !important;
    height: 250px !important;
}
sky-editor-canvas::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-background);
    opacity: .001;
    z-index: 100;
}
sky-editor.scaled sky-editor-canvas {
    position: absolute;
    top: 0;
    left: 0;
}
.canvas-expand-width sky-editor-canvas {
    width: 100%;
}
.canvas-expand-height sky-editor-canvas {
    min-height: 100%;
}

/* Guides */
sky-editor.hide-guides sky-editor-canvas sky-sheet *::after {
    content: none !important;
}

/* Tree */
.editor-tree-itm {
    z-index: 0;
}
.editor-tree-itm::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 100vw;
    height: 1px;
    background-color: var(--color-background);
    z-index: -1;
}
.editor-tree > .editor-tree-itm:first-child::after {
    display: none;
}
.editor-tree-arrow {
    transition: transform .3s ease;
}
.editor-tree-arrow.open {
    transform: translateY(-50%) rotate(90deg) !important;
}
.editor-tree-itm .select::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 100vw;
    height: 100%;
    background-color: black;
    opacity: .01;
    pointer-events: none;
}
.editor-tree-itm .select:hover::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 100vw;
    height: 100%;
    background-color: var(--font-color);
    opacity: .12;
    pointer-events: none;
}
.editor-tree-itm .select:active {
    overflow: hidden;
}
.editor-tree .drop-zone {
    pointer-events: none;
}
.editor-dnd .editor-tree .drop-zone {
    pointer-events: auto;
}

/* Selection */
sky-editor-selection {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border: 1pt solid var(--editor-select-color);
    margin: -1pt 0 0 -1pt;
    pointer-events: none;
    box-sizing: content-box;
    z-index: 1;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, .15);
}

/* Drag|Drop */
sky-editor-canvas.dnd::after {
    display: none;
}
sky-editor-canvas .drop_indicator {
    position: relative;
    display: block;
    width: var(--editor-drag-width,30px);
    height: var(--editor-drag-height,30px);
    min-width: 40px;
    min-height: 40px;
    box-sizing: border-box;
    border: 2px solid var(--editor-select-color);
    background-color: rgb(from var(--editor-select-color) r g b / 30%);
    flex-grow: 0;
    flex-shrink: 0;
    z-index: 1;
    pointer-events: all;
}
sky-editor-canvas.dnd.absolute .drop_indicator {
    pointer-events: none;
}
sky-editor-canvas sky-container[data-mode='v'] .drop_indicator,
sky-editor-canvas sky-structural > .drop_indicator,
sky-editor-canvas > .drop_indicator {
    width: 100%;
}
sky-editor-canvas sky-container[data-mode='h'] .drop_indicator {
    height: 100%;
}
.editor-tree .drop_indicator {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
    /* background-color: var(--editor-select-color); */
    border: 1px solid var(--editor-select-color);
    z-index: 1;
    pointer-events: none;
}

/* Sky Edit */
sky-edit-placeholder {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    box-sizing: border-box;
    z-index: 1;
}
sky-edit-placeholder::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    box-sizing: border-box;
    border: 2px solid var(--editor-select-color);
    background-color: rgb(from var(--editor-select-color) r g b / 30%);
}
sky-edit-panel {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    bottom: 0;
    display: flex;
    padding: var(--margin-small);
    padding-bottom: var(--app-toolbar-safe-area, var(--margin-small)) !important;
    z-index: 1;
    max-height: 65vh;
    justify-content: flex-end;
    pointer-events: none;
}
sky-edit-panel > sky-container {
    pointer-events: all;
}


/* Tool Group */
.tool-group-collapsable {
    display: block !important;
}
.tool-group > *, .tool-group-collapsable > * {
    margin-bottom: var(--margin-small);
}
.tool-group-collapsable.collapsed > * {
    display: none !important;
}
.tool-group-collapsable .header {
    display: flex !important;
    margin-bottom: var(--margin-small);
    padding: var(--margin-xsmall) 0 0;
}
.tool-group-collapsable.collapsed .header {
    margin-bottom: 0;
    padding-bottom: var(--margin-xsmall);
}
.tool-group-collapsable .header:hover::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 50%;
    display: block;
    width: calc(100% + 16px);
    height: calc(100% + var(--margin-xsmall) - 8px);
    transform: translateX(-50%);
    background-color: var(--font-color);
    opacity: .1;
    border-radius: var(--input-corner);
    pointer-events: none;
}
.tool-group-collapsable.collapsed .header:hover::before {
    height: calc(100% - 8px);
}

/* Data */
sky-db, sky-conditional {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 360px;
    min-width: 100%;
    max-width: 100%;
    gap: var(--margin-xsmall);
    padding: var(--margin-xsmall);
    border: 1px dashed var(--font-color);
    border-radius: var(--input-corner);
    overflow: hidden;
}
sky-db::before {
    content: "\F8BE";
    display: block;
    font-family: "Bootstrap Icons";
    font-size: var(--font-icon-size,18pt);
    color: var(--font-color,black);
    text-align: start;
    order: -2;
}
sky-db::after {
    content: attr(data-table);
    display: block;
    font-family: var(--font-bold), Arial, sans-serif;
    font-size: var(--font-h4-size,10pt);
    color: var(--font-color,black);
    text-align: start;
    line-height: var(--font-lineheight,normal);
    order: -1;
}
.setdc .prime:not(:only-child) {
    padding-bottom: 8px;
}
.setdc .prime:not(:only-child)::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--font-color);
    opacity: .15;
}

/* Conditionals */
sky-conditional {
    --conditional-color: var(--color-success);
    border-color: var(--conditional-color);
}
sky-conditional::before {
    content: attr(data-condition);
    display: block;
    background-color: var(--conditional-color);
    font-family: var(--font-bold), Arial, sans-serif;
    font-size: var(--font-size,10pt);
    text-transform: uppercase;
    color: var(--color-background,black);
    text-align: start;
    line-height: var(--font-lineheight,normal);
}
sky-conditional::before, sky-conditional .condition {
    width: calc(100% + calc(var(--margin-xsmall) * 2));
    margin-left: calc(0px - var(--margin-xsmall));
    margin-top: calc(0px - var(--margin-xsmall));
    padding: 6px var(--margin-xsmall);
}
sky-conditional[data-condition='else'] {
    --conditional-color: var(--color-error);
}

/* Modes */ 
sky-editor[data-mode="workflow"] sky-editor-canvas {
    padding: var(--margin-xsmall);
}
sky-editor[data-mode="workflow"] sky-structural {
    padding-bottom: 4px;
}
sky-editor[data-mode="workflow"] sky-structural[data-collapsable="true"] {
    height: auto;
}
sky-editor[data-mode="workflow"] sky-structural[data-tag="setDC"]::before {
    content: none;
}
sky-editor-canvas sky-sheet {
    margin-bottom: 8px;
}
sky-editor-canvas sky-sheet:last-child {
    margin-bottom: 0;
}
sky-editor-canvas sky-sheet *:not(sky-structural,sky-texteditor *)::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1pt solid var(--editor-frame-color);
    pointer-events: none;
    box-sizing: border-box;
    z-index: 1;
}

/* UI Modes */
sky-editor[data-ui-mode|="preview"] sky-editor-canvas {
    width: auto !important;
    background-color: transparent;
}

sky-editor[data-ui-mode="preview-3d"] sky-editor-canvas::after {
    content: none;
}
sky-editor[data-ui-mode="preview-3d"] sky-editor-canvas * {
    pointer-events: none;
}
sky-editor[data-ui-mode="preview-3d"] iframe {
    pointer-events: auto;
}

sky-editor[data-mode="print"] sky-editor-canvas {
    background-color: transparent;
}
sky-editor[data-mode="print"][data-facing-pages="true"] sky-editor-canvas {
    display: grid;
    grid-template-columns: repeat(2,1fr);
}
sky-editor[data-mode="print"][data-facing-pages="true"] sky-editor-canvas::before {
    content: "";
    display: block;
}
sky-editor[data-mode="print"][data-facing-pages="true"] sky-editor-canvas sky-sheet:nth-child(even)  {
    margin-right: 2px !important;
}
sky-editor[data-mode="print"][data-facing-pages="true"] .double-pg {
    grid-column: 1 / span 2;
    width: 100% !important;
}

sky-editor[data-mode="jobticket"] {
    justify-content: flex-start;
}
sky-editor[data-mode="jobticket"] sky-editor-canvas {
    flex-grow: 1;
}
sky-editor[data-mode="jobticket"] [data-tag='form-e'] * {
    pointer-events: none;
}

/* No pointer events within the canvas */
sky-editor-canvas [data-component] *, sky-editor-canvas sky-collapse .header {
    pointer-events: none !important;
}


/* Editor Print Configuration */
.editor-page-tree {
    counter-reset: page-count;
}
.editor-page-tree .editor-page {
    counter-increment: page-count;
}
.editor-page-tree .editor-page::after {
    content: counter(page-count);
    display: block;
    text-align: center;
    font-family: var(--font-standard), Arial, sans-serif;
    font-size: var(--font-size,10pt);
    color: var(--font-color,black);
    line-height: var(--font-lineheight,normal);
}


/* Colour Scheme */
@media (prefers-color-scheme: dark) {
    :root {
        --editor-select-color: #00ffff;
    }
}