1@menuitem_size: 2em;
2@menuicon_size: 1.2em;
3@menu_padding: 0.1em;
4
5.prosemirror_wrapper {
6    position: relative;
7}
8
9.menubar {
10    top: 0;
11    background: @ini_background;
12
13    .menuicon {
14        width: @menuitem_size;
15        text-align: center;
16
17        svg {
18            width: @menuicon_size;
19            height: @menuicon_size;
20            fill: @ini_text;
21        }
22    }
23
24    .menulabel {
25        display: none;
26        min-width: @menuitem_size;
27        padding: 0 3px;
28        color: @ini_text;
29    }
30
31    .menuitem {
32        display: inline-flex;
33        align-items: center;
34        box-sizing: border-box;
35        height: @menuitem_size;
36        padding: @menu_padding;
37        border-right: 1px solid fade(@ini_border, 30%);
38        cursor: pointer;
39
40        &:hover {
41            background-color: fade(@ini_border, 30%);
42        }
43
44        &.dropdown {
45            position: relative;
46
47            .menulabel {
48                display: block;
49            }
50
51            .dropdown-indicator {
52                width: 1em;
53            }
54        }
55
56        &.is-active {
57            border: 1px solid @ini_link;
58
59            > .menuicon svg {
60                fill: @ini_link;
61            }
62
63            > .menulabel {
64                color: @ini_link;
65            }
66        }
67
68        &.is-disabled {
69            pointer-events: none;
70
71            > .menuicon svg,
72            > .dropdown-indicator svg {
73                fill: @ini_border;
74            }
75
76            > .menulabel {
77                color: @ini_border;
78            }
79        }
80    }
81
82    .dropdown_content {
83        position: absolute;
84        top: @menuitem_size;
85        left: 0;
86        max-width: 300px;
87        white-space: nowrap;
88        background-color: @ini_background;
89        outline: 1px dotted @ini_border;
90
91        .menuitem {
92            display: flex;
93
94            .menulabel {
95                display: inline;
96            }
97        }
98
99        img {
100            float: left;
101        }
102    }
103}
104