.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-10;
    font-weight: $normal;

    &:hover {
        background: $grey-100;
        color: $grey-00;
        cursor: pointer;

        a {
            color: $grey-00;
        }
    }

    a {
        color: $grey-10;
    }

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

.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;
    }
}