/*
    universal special classes
*/

.hidden {
    --display: none;
    --visibility: none;
}

.dissapeared {
    --visibility: none;
}

/*
    utility loading classes
*/

div.init-loading {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    animation: loader-fade-in 150ms ease-in-out forwards;
    animation-delay: 50ms;
}

@keyframes loader-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
        pointer-events: all;
    }
}

div.init-loading.init-loading-done {
    animation: none;
    opacity: 0;
    pointer-events: none;
}

/*
    vue ui default style binding
*/

.vhost[v-cloak],
.vhost.vue-loading {
    opacity: 0;
}

.vhost.vue-ready {
    opacity: 1;
}

.vhost {
    opacity: 0;
    transition: opacity 175ms ease-in-out;
    --viewport-width: 1vw;
    --viewport-height: 1vh;
    --body-width: 100%;
    --body-height: 100%;
    min-width: var(--body-width);
    min-height: var(--body-height);
}

.vhost#vhost-universe {
    min-width: unset;
    min-height: unset;
}

.vhost#vhost-generic-instance {
    background: #ff0000;
}

/*
    client initialisation error display
    Previously inline-styled in interaction-model.js.
*/

.init-error {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-large, 1rem);
    padding: var(--spacing-large, 1rem);
    font-family: var(--font-family-sans-serif, sans-serif);
    background: inherit;
    color: red;
    pointer-events: all;
    user-select: text;
    --pointer-events-interact-non-ui: all;
    --pointer-events-interact-ui: all;
    --user-select-none: text;
}

.init-error__message {
    font-size: 1.1em;
    text-align: center;
}

.init-error__details {
    max-width: 80ch;
    width: 100%;
}

.init-error__summary {
    cursor: pointer;
}

.init-error__trace {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: var(--font-family-monospace, monospace);
    font-size: var(--font-size-code, 0.9em);
    padding: var(--spacing-medium, 6px);
    margin-top: var(--spacing-medium, 6px);
    border: 1px solid red;
    overflow: auto;
    max-height: 50vh;
}

.init-error__retry {
    cursor: pointer;
    padding: var(--spacing-small, 1px) var(--spacing-medium, 6px);
    border: 1px solid red;
}

.init-error__retry:disabled {
    opacity: 0.5;
    cursor: default;
}

/*
    ot-tree-view-renderer: token overrides.
    Light defaults are defined in the component's scoped <style>.
    Dark mode is not currently supported at the application level
    (all component styles use hardcoded light-theme values).
    These overrides are reserved for future theme support.
*/

/*
    ot-text: token overrides.
    Dark mode is not currently supported at the application level.
    These overrides are reserved for future theme support.
*/