.MenuActions { &.toolbar { --flex-gap: #{$padding / 2}; position: static; padding: 0; background: none; border: none; flex-direction: row; margin-right: var(--flex-gap) !important; .Icon { color: $textColorAccent; padding-right: 0; } .title, .arrow { display: none; } > .MenuItem { background: none !important; padding: 0; > .SubMenu { $offset: $margin; margin-top: $offset; top: 100%; right: $padding; &:before { position: absolute; width: 100%; top: -$offset; height: $offset; content: ""; } } } } .MenuItem { position: relative; &:hover > .SubMenu { opacity: 1; visibility: visible; } > .SubMenu { margin: 0; transition: visibility, opacity 150ms ease-in-out; transition-delay: 150ms; opacity: 0; visibility: hidden; right: 100%; top: -1px; margin-right: 2px; } } }