/* LapViz Studio: what the Tailwind / KTUI classes of the web site do not cover. */

#blazor-error-ui[style*="display: block"],
#blazor-error-ui.show {
    display: block !important;
}

.lv-studio-loading {
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    animation: lv-studio-spin 0.8s linear infinite;
}

@keyframes lv-studio-spin {
    to {
        transform: rotate(360deg);
    }
}

/* uPlot in the theme colors */
.lv-studio-chart .uplot {
    font-family: var(--font-sans);
    color: var(--muted-foreground);
}

.lv-studio-chart .u-legend {
    display: none;
}

.lv-studio-chart .u-cursor-x {
    border-right: 1px dashed var(--muted-foreground);
}

.lv-studio-chart .u-cursor-y {
    display: none;
}

.lv-studio-chart .u-select {
    background: color-mix(in oklab, var(--primary) 15%, transparent);
}

/* Drop zone shown while a file is dragged over the window */
.lv-studio-drop {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: none;
    align-items: center;
    justify-content: center;
    background: color-mix(in oklab, var(--background) 80%, transparent);
    border: 3px dashed var(--primary);
}

.lv-studio-drop.active {
    display: flex;
}

.lv-studio-drop input[type=file] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: copy;
}

/* Canvas views (map, scatter, histogram) fill their box */
.lv-studio-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* The z-indexes of Dockview (sashes 99, overlays 999...) stay inside the layout: the menus of the header stay above it */
#studio-dock {
    isolation: isolate;
}

/* The layout of the panels (Dockview, dock.js) in the colors of the site, light and dark (more specific than the theme
   of Dockview, whose styles are added after these ones) */
.dockview-theme-light.lv-dock {
    font-family: inherit;
    --dv-tabs-and-actions-container-font-size: 12px;
    --dv-tabs-and-actions-container-height: 32px;
    --dv-group-view-background-color: var(--background);
    --dv-tabs-and-actions-container-background-color: var(--muted);
    --dv-activegroup-visiblepanel-tab-background-color: var(--background);
    --dv-activegroup-hiddenpanel-tab-background-color: var(--muted);
    --dv-inactivegroup-visiblepanel-tab-background-color: var(--background);
    --dv-inactivegroup-hiddenpanel-tab-background-color: var(--muted);
    --dv-tab-divider-color: var(--border);
    --dv-activegroup-visiblepanel-tab-color: var(--foreground);
    --dv-activegroup-hiddenpanel-tab-color: var(--muted-foreground);
    --dv-inactivegroup-visiblepanel-tab-color: var(--secondary-foreground);
    --dv-inactivegroup-hiddenpanel-tab-color: var(--muted-foreground);
    --dv-separator-border: var(--border);
    --dv-paneview-active-outline-color: var(--primary);
    --dv-drag-over-background-color: color-mix(in srgb, var(--primary) 20%, transparent);
    --dv-icon-hover-background-color: var(--accent);
    --dv-scrollbar-background-color: var(--border);
}

.dark .dockview-theme-light.lv-dock {
    color-scheme: dark;
}

/* A panel: its component fills it and scrolls */
.lv-dock-panel {
    height: 100%;
    overflow: auto;
    color: var(--foreground);
}

/* "+" of a chart (ChannelPicker): a channel added to it; a small select, its options listed when open */
.lv-chart-add {
    width: 1.75rem;
    height: 1.5rem;
    padding: 0;
    border-radius: 0.375rem;
    border: 1px dashed var(--border);
    background: transparent;
    color: var(--muted-foreground);
    text-align: center;
    text-align-last: center;
    font-size: 0.875rem;
    cursor: pointer;
    appearance: none;
}

.lv-chart-add:hover {
    color: var(--foreground);
    border-color: var(--input);
}