@import url("./fusion.css"); /* https://codeberg.org/hkau/fusion */

.tab-container {
    background: var(--background-surface1);
    transition: background 0.15s;
    padding: 1.5rem !important;
    height: 78dvh;
    overflow-y: auto;
    max-height: 90vh;
    margin-bottom: 0.5rem;
    max-width: 100vw;
    min-height: 15rem;
}

@media screen and (max-width: 900px) {
    .tab-container {
        max-height: 65vh;
        padding: 1rem;
    }
}

.editor-tab.-editor:not(.active) {
    display: none;
}

/* stuff for builder */
#_doc {
    overflow: auto;
}

.builder\:page {
    --AlignX: center;
    --AlignY: center;
    --Spacing: 10px;
    --Display: flex;

    width: 100vw;
    height: 100vh;

    gap: var(--Spacing);
    overflow-x: hidden;

    display: var(--Display);
    flex-direction: column;
    align-items: var(--AlignX);
    justify-content: var(--AlignY);

    box-shadow: 0 0 4px hsla(0, 0%, 0%, 75%);
}

.builder\:text {
    --Size: 16px;
    --Weight: 400;
    --LineSpacing: 1.5;
    --LetterSpacing: 1;
    --Margins: 0;
    --Padding: 0.2rem;
    --Alignment: initial;
    --BorderRadius: 0;
    --Background: transparent;
    --Color: var(--text-color);
    --Width: max-content;

    font-size: var(--Size);
    font-weight: var(--Weight);
    line-height: var(--LineSpacing);
    letter-spacing: var(--LetterSpacing);
    margin: var(--Margins);
    padding: var(--Padding);
    text-align: var(--Alignment);
    border-radius: var(--BorderRadius);
    background: var(--Background);
    color: var(--Color);
    font-size-adjust: none;
    width: var(--Width);
    max-width: 100%;
    white-space: pre;
}

.builder\:card {
    --Background: var(--background-surface1);
    --Width: max-content;
    --Padding: 1rem;
    --Display: block;
    --Direction: row;
    --JustifyContent: initial;
    --AlignItems: initial;
    --Gap: 0;

    background: var(--Background);
    padding: var(--Padding);
    width: var(--Width);
    max-width: 100vw;
    min-width: 5rem;
    overflow: auto;
    height: max-content;

    display: var(--Display);
    flex-wrap: wrap;
    justify-content: var(--JustifyContent);
    align-items: var(--AlignItems);
    flex-direction: var(--Direction);
    gap: var(--Gap);
}

.builder\:card .builder\:card {
    max-width: 100%;
}

.builder\:embed {
    padding: 0.5rem;
}

.builder\:embed[src="about:blank"] {
    background: var(--background-surface-1);
    cursor: move !important;
}

.builder\:source {
    --Display: block;
    display: var(--Display);
}

.builder\:toolbar {
    position: fixed;
    top: var(--u-04);
    right: var(--u-04);
    display: flex;
    flex-wrap: wrap;
    gap: var(--u-04);
    padding: 0.5rem;
    justify-content: center;
    align-items: center;
    height: 3.5rem;
    width: max-content;
    z-index: 500000000;
}

.builder\:toolbar.verticle {
    flex-direction: column-reverse;
    height: max-content;
}

.builder\:toolbar button {
    background: var(--background-surface1);
    border: solid 1px transparent;
}

.builder\:toolbar button:not(#PageStar):hover {
    background: var(--background-surface1-5a);
    border-color: var(--background-surface2a);
}

.builder\:toolbar.always-absolute button {
    border: none;
}

.builder\:sidebar {
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    width: 25rem;
    border-right: solid 1px var(--background-surface2a);
    background: var(--background-surface1);
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: SlideInFromLeft 0.15s 0s running;
    overflow: auto;
    z-index: 500250000;
    transition: all 0.15s;
}

.builder\:sidebar.full {
    width: 100vw;
}

.builder\:sidebar .options {
    display: flex;
    flex-direction: column;
    gap: var(--u-04);
    padding: var(--u-04);
    max-width: 100%;
    width: 100%;
}

.builder\:sidebar.full .options {
    width: 50%;
}

.builder\:sidebar .options button:not(.normal),
.builder\:sidebar .options .option {
    width: 100%;
    padding: var(--u-06);
    border: solid 1px var(--background-surface2a);
    display: flex;
    gap: var(--u-04);
    border-radius: var(--u-04);
    transition: box-shadow 0.15s;
}

.builder\:sidebar .options button:not(.normal):hover,
.builder\:sidebar .options .option:hover,
.builder\:sidebar .options details[open] summary.option {
    box-shadow: inset 0 0 2px var(--background-surface2a);
    background: var(--background-surface1-5) !important;
}

.builder\:sidebar .options button:not(.normal),
.builder\:sidebar .options .option:not(.normal) {
    border-color: var(--background-surface3);
}

.builder\:sidebar .options button:not(.normal).green {
    border-color: var(--green3);
}

.builder\:sidebar .options button:not(.normal).red {
    border-color: var(--red);
}

.builder\:sidebar .options input,
.builder\:sidebar .options textarea,
.builder\:sidebar .options select {
    border-radius: var(--u-04) !important;
    padding: var(--u-06) var(--u-08);
    border: solid 1px var(--background-surface2a);
    transition: border-color 0.15s;
}

.builder\:sidebar .options input,
.builder\:sidebar .options select {
    height: max-content !important;
}

.builder\:sidebar .options input:focus,
.builder\:sidebar .options textarea:focus,
.builder\:sidebar .options select:focus {
    border-color: var(--blue);
}

.builder\:sidebar .options .option {
    flex-direction: column;
}

.builder\:event-zone {
    display: contents;
}

.builder\:drag-element {
    position: relative;
    max-width: 100%;
}

.builder\:drag-zone {
    user-select: none;
    -webkit-user-select: none;
    width: 100%;
    padding: 0.5rem;
    display: none;
    height: 5px;
    position: absolute;
}

.builder\:drag-zone.top {
    border-top: dashed 2px var(--background-surface2);
    top: -10px;
}

.builder\:drag-zone.bottom {
    border-bottom: dashed 2px var(--background-surface2);
    bottom: -10px;
}

.builder\:drag-zone.active {
    border-color: var(--blue2);
    display: block;
}

.component[data-edit="true"] {
    cursor: pointer;
}

.component.hover,
.component.active {
    --blue2a: hsla(208, 98%, 35%, 25%);
    box-shadow: 0 0 0 4px var(--blue2a);
    outline: solid 2px var(--blue2);
    transition:
        box-shadow 0.15s,
        outline 0.15s;
}

.component h1 {
    width: 100%;
}

.component h1,
.component h2,
.component h3,
.component h4,
.component h5,
.component h6 {
    text-align: var(--Alignment);
}

.component * .htag {
    display: none;
}

.builder\:toolbar.always-absolute {
    height: max-content !important;
}

.builder\:stat {
    background: hsla(0, 0%, 0%, 75%);
    color: white;
    padding: 0.25rem;
    border-radius: var(--u-04);
    user-select: none;
    cursor: pointer;
    padding: var(--u-02) var(--u-08);
    display: flex;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width: 900px) {
    .builder\:sidebar.full .options {
        width: 22rem;
    }

    .component.builder\:page[data-edit="true"] {
        /* adjust for toolbar */
        padding-top: 3.5rem;
    }

    .builder\:toolbar:not(.always-absolute):not(.verticle) {
        width: 100vw;
        top: 0;
        left: 0;
        border-radius: 0;
    }

    .builder\:sidebar {
        width: 100vw;
    }

    .workspace\:toolbar {
        justify-content: flex-start;
        margin: 0 !important;
        width: 100% !important;
    }
}

/* block information pane */
:root {
    --block-background: hsl(0, 0%, 0%);
    --block-background-lighter: hsl(0, 0%, 15%);
    --block-accent: hsl(216, 74%, 38%);
    --block-accent-muted: hsl(216, 74%, 32%);
    --block-text: white;
    --block-font: monospace;
}

.block-dialog {
    font-family: monospace;
    background: var(--block-background);
    color: var(--block-text);
    position: fixed;
    z-index: 20000000;
    width: 25rem;
    max-width: 100%;
    max-height: 50rem;
    overflow-y: auto;
}

.block-dialog:hover {
    box-shadow: 0 0 2px var(--block-text);
}

.block-dialog * {
    font-family: monospace;
}

.block-dialog *:not(span) {
    padding: var(--u-04);
}

.block-dialog .block-header {
    background: var(--block-accent-muted);
    transition: background 0.15s;
    cursor: move;
    padding: 0;
    user-select: none;
    position: sticky;
    top: 0;
}

.block-dialog .block-header span:first-child {
    /* header title */
    padding: var(--u-02) var(--u-04);
}

.block-dialog:hover .block-header,
.block-dialog:focus-within .block-header,
.block-dialog:active .block-header {
    background: var(--block-accent);
}

.block-dialog button,
.block-dialog .button {
    background: var(--block-accent);
    padding: var(--u-02) var(--u-04) !important;
    height: max-content !important;
    min-width: max-content;
    cursor: pointer;
    user-select: none;
}

.block-dialog button:hover,
.block-dialog .button:hover {
    background: var(--block-accent-muted);
}

.block-dialog .block-list {
    display: flex;
    flex-direction: column;
}

.block-dialog .block-list .option:not(:last-child) {
    border-bottom: solid 1px var(--block-background-lighter);
}

/* ... */
[role="custom-color"] * {
    color: inherit !important;
}

[role="spoiler"] {
    --hidden-color: var(--background-surface2);
    --active-color: var(--background-surface2a);
    padding: 0 var(--u-02);
    background: var(--hidden-color);
    border-radius: var(--u-02);
    color: transparent;
    transition: all 0.15s;
    box-shadow: none;
}

[role="spoiler"]:hover,
[role="spoiler"]:active,
[role="spoiler"]:focus {
    background: var(--active-color);
    color: inherit;
}

.dark-theme [role="spoiler"] {
    --hidden-color: var(--background-surface);
    --active-color: var(--background-surface1a);
}