.BubbleMenu { background: #000; display: flex; flex-direction: row; align-items: center; .bubbleMenuButton { display: inline-flex; align-items: center; justify-content: center; flex-wrap: nowrap; opacity: 0.5; padding: 1rem; .triangle { margin-left: 4px; } img { display: block; } } .bubbleMenuButtonActive { opacity: 1; } .delimiter { background: #fff; opacity: 0.5; display: inline-block; height: 1.4em; margin: 0 0.2em; vertical-align: text-bottom; width: 1px; } .dropDownHolder { position: relative; cursor: pointer; display: inline-flex; flex-flow: row nowrap; align-items: center; .dropDown { position: absolute; padding: 6px; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); box-shadow: 0 4px 10px rgb(0 0 0 / 25%); background: #000; color: #898c94; & > header { font-size: 10px; border-bottom: 1px solid #898c94; } .actions { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; margin-bottom: 8px; .color { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #3c3c3c; background: #ccc; &.yellow { background: #f6e3a1; } &.white { background: #fff; box-shadow: inset 0 0 0 1px #000; border-color: #fff; } &.yellow { background: #f6e3a1; } &.pink { background: #f1b5bc; } &.green { background: #bfe9cb; box-shadow: inset 0 0 0 1px #000; border-color: #fff; } &.black { background: #000; } } &:last-child { margin-bottom: 0; } .bubbleMenuButton { min-width: 40px; } } } } }