div.menu {
position: relative;
display: inline flex;
flex-direction: column;
align-items: flex-start;
align-self: center;
flex: 0 0 auto;
border: 0;
margin: 0px;
padding: 0px;
--padding: 5px;
div.menu-inner {
padding: 3px;
margin-left: 2px;
img.menu-icon {
@include trz-icon;
}
&:hover {
img.menu-icon {
filter: invert(0);
}
background-color: var(--link-color);
cursor: pointer;
}
}
}
ul.menu-items {
@include trz-menu;
border: 1px solid white;
>li {
display: flex;
flex-direction: row;
img.app-icon {
@include trz-icon;
margin-right: var(--padding);
}
}
&:not(:hover) {
>li {
&.active {
background-color: var(--link-color);
}
}
}
}
div.menu>ul.menu-items>li.splits {
background-color: var(--background-color);
cursor: default;
.split-icon {
@include trz-icon;
padding: 2px;
&:hover {
filter: invert(0);
background-color: var(--link-color);
cursor: pointer;
}
}
>div {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
}