.Menu {
    background: white;
    border-radius: 6px;
    display: none;
    min-width: 220px;
    position: absolute;
    top: $unit * 5; // This shouldn't be hardcoded. How to calculate it?
    z-index: 10;
}

.MenuItem {
    color: $grey-40;
    font-weight: $normal;

    &:hover:not(.disabled) {
        background: $grey-100;
        color: $grey-00;
        cursor: pointer;

        a {
            color: $grey-00;
        }
    }

    a {
        color: $grey-40;
    }

    & > a, & > span {
        display: block;
        padding: 12px;
    }

    & > div {
        align-items: center;
        display: flex;
        flex-direction: row;
        padding: 10px 12px;

        span {
            flex-grow: 1;
        }

        &:hover {
            i.tag {
                background: $grey-60;
                color: white;
            }
        }
    }
}

.MenuGroup {
    border-bottom: 1px solid #f5f5f5;

    &:first-child .MenuItem:first-child:hover {
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
    }

    &:last-child .MenuItem:last-child:hover {
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
    }

    &:last-child {
        border-bottom: none;
    }
}