1import { css } from '@emotion/css';
2import { config } from 'app/core/config';
3import { stylesFactory } from '@grafana/ui';
4
5export const getPanelInspectorStyles = stylesFactory(() => {
6  return {
7    wrap: css`
8      display: flex;
9      flex-direction: column;
10      height: 100%;
11      width: 100%;
12      flex: 1 1 0;
13    `,
14    toolbar: css`
15      display: flex;
16      width: 100%;
17      flex-grow: 0;
18      align-items: center;
19      justify-content: flex-end;
20      margin-bottom: ${config.theme.spacing.sm};
21    `,
22    toolbarItem: css`
23      margin-left: ${config.theme.spacing.md};
24    `,
25    content: css`
26      flex-grow: 1;
27      height: 100%;
28      padding-bottom: 16px;
29    `,
30    contentQueryInspector: css`
31      flex-grow: 1;
32      padding: ${config.theme.spacing.md} 0;
33    `,
34    editor: css`
35      font-family: monospace;
36      height: 100%;
37      flex-grow: 1;
38    `,
39    viewer: css`
40      overflow: scroll;
41    `,
42    dataFrameSelect: css`
43      flex-grow: 2;
44    `,
45    tabContent: css`
46      height: 100%;
47      display: flex;
48      flex-direction: column;
49    `,
50    dataTabContent: css`
51      display: flex;
52      flex-direction: column;
53      height: 100%;
54      width: 100%;
55    `,
56    actionsWrapper: css`
57      display: flex;
58    `,
59    leftActions: css`
60      display: flex;
61      flex-grow: 1;
62
63      max-width: 85%;
64      @media (max-width: 1345px) {
65        max-width: 75%;
66      }
67    `,
68    options: css`
69      padding-top: ${config.theme.spacing.sm};
70    `,
71    dataDisplayOptions: css`
72      flex-grow: 1;
73      min-width: 300px;
74      margin-right: ${config.theme.spacing.sm};
75    `,
76    selects: css`
77      display: flex;
78      > * {
79        margin-right: ${config.theme.spacing.sm};
80      }
81    `,
82  };
83});
84