/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

@import url("chrome://dot/content/widgets/dev-debug-graph.css");

#devDebugPopout {
    display: flex;
    font: message-box;
    max-width: 552px;
    min-width: 552px;
    max-height: var(--height);
    min-height: var(--height);
    background-color: var(--lwt-accent-color, #080809);
    color: var(--lwt-text-color, white);
    overflow: clip;
    -moz-window-dragging: drag;
}

#devDebugPopout body {
    margin: 0;
}

#devDebugPopout dev-debug-panel {
    pointer-events: all;
}

dev-debug-panel {
    pointer-events: none;
    padding: 16px;
    display: flex;
    flex-direction: column;
    white-space: break-spaces;
    gap: 1rem;
    width: calc(100% - 16px * 2);
    z-index: 2147483647;
}

dev-debug-panel span {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 20px;
}

dev-debug-panel img {
    -moz-context-properties: fill;
    fill: currentColor;
}

dev-debug-panel .dev-graph-group,
dev-debug-panel .dev-active-theme {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

dev-debug-panel .dev-graph-group-dot {
    width: 1rem;
    height: 1rem;
    border-radius: 1rem;
    background-color: var(--color);
}

dev-debug-panel .dev-branding-lockup {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

dev-debug-panel .dev-active-theme-container,
dev-debug-panel .dev-customizable-ui-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

dev-debug-panel .dev-native-titlebar-container {
    display: flex;
    gap: 0.5rem;
}

dev-debug-panel .dev-debug-open-link-btns {
    display: flex;
    gap: 0.5rem;
}

dev-debug-panel .dev-debug-open-link-btns button {
    flex: 1;
    align-items: center;
    justify-content: center;
}